milkdown_engine 0.1.1 → 0.1.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: fc838ab80db68a94955f43200672ffe5cb687b3741cb565ac036bb99b8f17bb7
-  data.tar.gz: 2052f7718e5baf506706854b6e6f25d6b68406aad01283bd8eb9b3d2832313fa
+  metadata.gz: cae76a4c5e5b3f031abb244592b8409c33d85e3cd590536ce62017d707d38314
+  data.tar.gz: f50de7f3bb331329dcbb8642d51e7464d97f6379416cd9db1b0b7dd9d15bfd1c
 SHA512:
-  metadata.gz: b68068e9a1fd786427f6b0d08bfef4e7ecc2fd39b436d7363c1728216e1a2debb7fdf02784a4d4da3e04905610c8bcb8a007f343c1334facb14ef329d8fadf5e
-  data.tar.gz: 35d58acd3ba8b3a8c186b2d8f8719a25a14244d8ac252cc35261f7e0716cc3d07144f7f878e53661c2dcd358ee136fbc7396f0315fc39fca783bf3aca4e0a9b4
+  metadata.gz: f1070fe2f7f90718c6bdda8362f940d6a1e7ee9efcdf9b444172a06b044970cc0da7bbfa2040b4a4ec9628d43a51f7e94b81d8398d69c2239a56291993f30b42
+  data.tar.gz: 982f0725cdddc3bacd8cfeecdb202f666f8661dc23590c0231bacda39d30a780100ddb0f731f2c912e1db22b024cf43984ea46579a9f352522a98e0b328900fe

data/app/assets/stylesheets/milkdown_engine/application.css

@@ -10,6 +10,14 @@
 .milkdown-editor.ui.segment {
   padding: 0;
   position: relative;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  overflow: hidden;
+  margin: 0;
+  border: none;
+  box-shadow: none;
+  border-radius: 0;
 }
 
 .milkdown-editor-label {
@@ -18,11 +26,52 @@
   font-weight: 700;
   font-size: 0.92857143em;
   color: rgba(0, 0, 0, 0.87);
+  flex-shrink: 0;
 }
 
 /* The inner surface where Crepe mounts the ProseMirror editor. */
 .milkdown-editor-surface {
   min-height: 12rem;
+  flex: 1;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+}
+
+.milkdown-editor-surface .milkdown {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 100%;
+}
+
+.milkdown-editor-surface .milkdown .ProseMirror {
+  padding: 15px 15px 15px 40px;
+  flex: 1;
+  min-height: 100%;
+  cursor: text;
+}
+
+/* Title bar: fixed at top, no grow */
+#content-editor .editor-title-bar {
+  flex-shrink: 0;
+  border-bottom: 1px solid #dfe1e4;
+}
+
+/* Content form: fills remaining space, scrolls via milkdown surface */
+#content-editor .editor-content {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  overflow: hidden;
+}
+
+#content-editor .editor-content .ui.form {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  overflow: hidden;
+  margin: 0;
 }
 
 /* When used inside a Fomantic form field, drop the segment border so it
@@ -38,3 +87,344 @@
   opacity: 0.75;
   pointer-events: none;
 }
+
+/* ═══════════════════════════════════════════════════════════════════════
+   Three-panel editor layout
+   ═══════════════════════════════════════════════════════════════════════ */
+
+/* Prevent parent from scrolling when the editor layout is active */
+#site-content-scroll:has(#md-app) {
+  overflow-y: hidden;
+}
+
+/* ── App shell grid ──────────────────────────────────── */
+#md-app {
+  display: grid;
+  grid-template-columns: 360px 1fr;
+  grid-template-rows: 1fr;
+  grid-template-areas:
+    "item-list-panel  content-editor";
+  height: 100%;
+}
+
+/* ── Zone borders / backgrounds ──────────────────────── */
+#navigation-rail  { grid-area: navigation-rail;  background: #f0ede8; border-right: 1px solid #dddbd7; display: none; }
+#item-list-panel  { grid-area: item-list-panel;  background: #faf9f7; border-right: 1px solid #dddbd7; }
+#content-editor   { grid-area: content-editor;   background: #ffffff; }
+#system-bar       { grid-area: system-bar;        background: #f0ede8; border-top: 1px solid #dddbd7; }
+
+/* ── Navigation rail ────────────────────────────────── */
+#navigation-rail {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+#navigation-rail-search {
+  padding: 10px 10px 6px;
+  flex-shrink: 0;
+}
+
+#navigation-rail-search .ui.input input {
+  background: rgba(255,255,255,0.6);
+  border-color: #dddbd7;
+  border-radius: 20px;
+  font-size: 0.82rem;
+}
+
+#navigation-rail-views,
+#navigation-rail-tags {
+  flex-shrink: 0;
+}
+
+#navigation-rail-tags {
+  flex: 1;
+  overflow-y: auto;
+}
+
+/* Rail menus — strip Fomantic box shadows / borders */
+#navigation-rail .ui.vertical.menu {
+  width: 100%;
+  box-shadow: none;
+  border: none;
+  border-radius: 0;
+  background: transparent;
+  margin: 0;
+}
+
+#navigation-rail .ui.vertical.menu .item {
+  padding: 7px 14px;
+  font-size: 0.83rem;
+  color: #555;
+  border-radius: 0;
+}
+
+#navigation-rail .ui.vertical.menu .item.active {
+  background: rgba(255,255,255,0.55);
+  color: #1a1a1a;
+  font-weight: 600;
+  border-left: 3px solid #4a90d9;
+}
+
+#navigation-rail .ui.vertical.menu .item .icon {
+  margin-right: 8px;
+  color: #888;
+  width: 1em;
+}
+
+#navigation-rail .ui.vertical.menu .item.active .icon {
+  color: #4a90d9;
+}
+
+.rail-section-label {
+  padding: 14px 14px 4px;
+  font-size: 0.7rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: #999;
+}
+
+/* ── Item list panel ────────────────────────────────── */
+#item-list-panel {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+#item-list-header {
+  padding: 12px 14px 8px;
+  flex-shrink: 0;
+  border-bottom: 1px solid #eae8e4;
+}
+
+#item-list-header .ui.header {
+  margin: 0;
+  font-size: 1rem;
+  font-weight: 600;
+  color: #1a1a1a;
+}
+
+#item-list-search {
+  flex-shrink: 0;
+  padding: 0 10px 8px;
+}
+
+#item-list-search .ui.input input {
+  background: #efecea;
+  border-color: transparent;
+  border-radius: 20px;
+  font-size: 0.82rem;
+}
+
+#item-list-banner {
+  flex-shrink: 0;
+  margin: 0 10px 6px;
+}
+
+#item-list-banner .ui.message {
+  font-size: 0.78rem;
+  padding: 8px 12px;
+  border-radius: 8px;
+}
+
+#item-list-scroll {
+  flex: 1;
+  overflow-y: auto;
+  padding: 4px 0;
+}
+
+/* Note cards */
+.note-card {
+  padding: 10px 14px;
+  border-bottom: 1px solid #eae8e4;
+  cursor: pointer;
+  border-left: 3px solid transparent;
+  transition: background 0.12s;
+}
+
+.note-card:hover { background: #f3f1ee; }
+
+.note-card.active {
+  background: #eaf0f9;
+  border-left-color: #4a90d9;
+}
+
+.note-card-title {
+  font-size: 0.88rem;
+  font-weight: 600;
+  color: #1a1a1a;
+  margin-bottom: 3px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.note-card-preview {
+  font-size: 0.78rem;
+  color: #777;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-bottom: 4px;
+}
+
+.note-card-meta {
+  font-size: 0.72rem;
+  color: #aaa;
+}
+
+.note-card-tag {
+  display: inline-block;
+  background: #eae8e4;
+  color: #666;
+  border-radius: 4px;
+  padding: 1px 6px;
+  font-size: 0.7rem;
+  margin-top: 4px;
+}
+
+/* ── Content editor ─────────────────────────────────── */
+#content-editor {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  overflow-y: hidden;
+}
+
+/* Toolbar row */
+#editor-toolbar-row.ui.menu {
+  border-radius: 0;
+  border: none;
+  border-bottom: none !important;
+  box-shadow: none;
+  background: #fff;
+  margin: 0;
+  min-height: 46px;
+  padding: 0 6px;
+}
+
+#editor-toolbar-row .ui.transparent.input input {
+  font-size: 0.98rem;
+  font-weight: 600;
+  color: #1a1a1a;
+  padding-left: 4px;
+}
+
+#editor-toolbar-row .item {
+  padding: 6px 8px;
+  color: #888;
+}
+
+#editor-toolbar-row .item:hover { color: #333; }
+
+/* Context strip */
+#editor-context-strip.ui.menu {
+  border-radius: 0;
+  border: none;
+  border-bottom: 1px solid #eae8e4 !important;
+  box-shadow: none;
+  background: #fafafa;
+  margin: 0;
+  min-height: 36px;
+  padding: 0 10px;
+}
+
+#editor-context-strip .item {
+  padding: 4px 6px;
+}
+
+#editor-context-strip .ui.label {
+  font-size: 0.73rem;
+  border-radius: 20px;
+  padding: 3px 10px;
+  background: #eae8e4;
+  color: #555;
+  border: none;
+  margin-right: 4px;
+}
+
+#editor-context-strip .ui.transparent.input input {
+  font-size: 0.78rem;
+  color: #aaa;
+  padding: 0;
+}
+
+/* Formatting toolbar */
+#editor-format-bar.ui.menu {
+  border-radius: 0;
+  border: none;
+  border-bottom: 1px solid #eae8e4 !important;
+  box-shadow: none;
+  background: #f8f7f5;
+  margin: 0;
+  min-height: 34px;
+}
+
+#editor-format-bar .item {
+  padding: 5px 10px;
+  color: #777;
+  font-size: 0.82rem;
+}
+
+#editor-format-bar .item:hover { background: #eee; color: #222; }
+#editor-format-bar .item.active { color: #4a90d9; }
+
+#editor-format-bar .divider {
+  width: 1px;
+  background: #ddd;
+  margin: 6px 2px;
+  align-self: stretch;
+}
+
+/* Body canvas */
+#editor-body-canvas {
+  flex: 1;
+  overflow-y: auto;
+  padding: 28px 40px;
+}
+
+#editor-body-canvas textarea {
+  width: 100%;
+  height: 100%;
+  border: none;
+  outline: none;
+  resize: none;
+  font-size: 0.95rem;
+  line-height: 1.75;
+  color: #2a2a2a;
+  font-family: 'Georgia', serif;
+  background: transparent;
+}
+
+/* ── System bar ─────────────────────────────────────── */
+#system-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 12px;
+  font-size: 0.72rem;
+  color: #888;
+}
+
+#system-bar-left,
+#system-bar-right {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+#system-bar .sync-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: #5cb85c;
+  display: inline-block;
+  margin-right: 4px;
+}
+
+#system-bar a {
+  color: #4a90d9;
+  text-decoration: none;
+  font-weight: 500;
+}

data/app/controllers/milkdown_engine/application_controller.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
 module MilkdownEngine
-  class ApplicationController < ActionController::Base
+  class ApplicationController < ::ApplicationController
   end
 end

data/app/controllers/milkdown_engine/notes_controller.rb

@@ -0,0 +1,62 @@
+# frozen_string_literal: true
+
+module MilkdownEngine
+  class NotesController < ApplicationController
+    before_action :set_notes
+    before_action :set_note, only: %i[show edit update destroy]
+
+    def index
+      @note = @notes.first || Document.new
+    end
+
+    def show; end
+
+    def new
+      @note = Document.new
+    end
+
+    def create
+      @note = Document.new(note_params)
+      if @note.save
+        redirect_to note_path(@note), notice: "Note was successfully created."
+      else
+        render :new, status: :unprocessable_entity
+      end
+    end
+
+    def edit; end
+
+    def update
+      if @note.update(note_params)
+        respond_to do |format|
+          format.turbo_stream { head :ok }
+          format.html { redirect_to note_path(@note), notice: "Note was successfully updated." }
+        end
+      else
+        render :edit, status: :unprocessable_entity
+      end
+    end
+
+    def destroy
+      @note.destroy!
+      redirect_to notes_path, notice: "Note was successfully deleted."
+    end
+
+    private
+
+    def set_notes
+      @q = Document.ransack(params[:q])
+      @notes = @q.result.order(updated_at: :desc)
+    end
+
+    def set_note
+      @note = Document.find(params[:id])
+    end
+
+    def note_params
+      params.require(:document).permit(:title, :content).tap do |p|
+        p[:content] = JSON.parse(p[:content]) if p[:content].is_a?(String)
+      end
+    end
+  end
+end

data/app/helpers/milkdown_engine/application_helper.rb

@@ -3,7 +3,7 @@
 module MilkdownEngine
   module ApplicationHelper
     CONTROLLER_ID = "milkdown-engine--editor"
-    EMPTY_DOC = { type: "doc", content: [{ type: "paragraph" }] }.to_json.freeze
+    EMPTY_DOC = { type: "doc", content: [ { type: "paragraph" } ] }.to_json.freeze
 
     # Renders a Milkdown editor wired to a hidden <input> for form submission.
     #
@@ -24,12 +24,12 @@ module MilkdownEngine
     # ==== Examples
     #
     #   # Standalone (no form builder)
-    #   <%= milkdown_editor "md_document[content]", @document.content %>
+    #   <%= milkdown_editor "document[content]", @document.content %>
     #
     #   # Inside a Fomantic-UI form
     #   <% Form { %>
     #     <div class="field">
-    #       <%= milkdown_editor "md_document[content]", @document.content, label: "Content" %>
+    #       <%= milkdown_editor "document[content]", @document.content, label: "Content" %>
     #     </div>
     #     <% Button(variant: :primary, type: :submit) { text "Save" } %>
     #   <% } %>
@@ -43,11 +43,11 @@ module MilkdownEngine
       editor_html = html_options.delete(:editor_html) || {}
 
       json_value = case value
-                   when String then value.presence || EMPTY_DOC
-                   when Hash   then value.present? ? value.to_json : EMPTY_DOC
-                   when nil    then EMPTY_DOC
-                   else value.to_json
-                   end
+      when String then value.presence || EMPTY_DOC
+      when Hash   then value.present? ? value.to_json : EMPTY_DOC
+      when nil    then EMPTY_DOC
+      else value.to_json
+      end
 
       extra_class = html_options.delete(:class)
       wrapper_classes = class_names("ui segment milkdown-editor", extra_class)
@@ -84,5 +84,16 @@ module MilkdownEngine
 
       milkdown_editor(name, value, **options)
     end
+
+    # PascalCase helper for use inside Form() blocks.
+    # Uses @_form_builder set by FormComponent automatically.
+    #
+    #   Form(model: @note, url: note_path(@note)) {
+    #     MilkdownEditor(:content)
+    #   }
+    #
+    def MilkdownEditor(method, **options)
+      output_buffer << milkdown_editor_field(@_form_builder, method, **options)
+    end
   end
 end

data/app/javascript/milkdown_engine/controllers/auto_submit_controller.js

@@ -0,0 +1,10 @@
+import AutoSubmit from "@stimulus-components/auto-submit"
+
+export default class extends AutoSubmit {
+  static values = {
+    delay: {
+      type: Number,
+      default: 500,
+    },
+  }
+}

data/app/javascript/milkdown_engine/controllers/editor_controller.js

@@ -13,7 +13,7 @@ import {
 //        data-milkdown-engine--editor-readonly-value="false">
 //     <input type="hidden"
 //            data-milkdown-engine--editor-target="input"
-//            name="md_document[content]"
+//            name="document[content]"
 //            value='{"type":"doc","content":[]}'>
 //     <div data-milkdown-engine--editor-target="editor"></div>
 //   </div>

data/app/javascript/milkdown_engine/controllers/item_list_controller.js

@@ -0,0 +1,29 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["item"]
+  static values = { selectedId: { type: Number, default: 0 } }
+
+  connect() {
+    this.#applySelected()
+  }
+
+  select(event) {
+    const card = event.currentTarget.querySelector("[data-note-id]")
+      || event.target.closest("[data-note-id]")
+    if (card) {
+      this.selectedIdValue = parseInt(card.dataset.noteId, 10) || 0
+    }
+  }
+
+  selectedIdValueChanged() {
+    this.#applySelected()
+  }
+
+  #applySelected() {
+    this.itemTargets.forEach((item) => {
+      const id = parseInt(item.dataset.noteId, 10) || 0
+      item.classList.toggle("active", id === this.selectedIdValue)
+    })
+  }
+}

data/app/models/milkdown_engine/{md_document.rb → document.rb}

@@ -1,12 +1,22 @@
 # frozen_string_literal: true
 
 module MilkdownEngine
-  class MdDocument < ApplicationRecord
+  class Document < ApplicationRecord
     ChecklistItem = Data.define(:text, :checked)
     Heading       = Data.define(:level, :id, :text)
 
+    acts_as_taggable_on :tags
+
     validates :content, presence: true
 
+    def self.ransackable_attributes(auth_object = nil)
+      %w[title created_at updated_at]
+    end
+
+    def self.ransackable_associations(auth_object = nil)
+      %w[tags taggings]
+    end
+
     before_save :set_title_from_content, if: -> { title.blank? && content_changed? }
 
     # ── JSON query helpers (PostgreSQL jsonb_path_query) ─────────────────
@@ -24,7 +34,7 @@ module MilkdownEngine
           (item #>> '{attrs,checked}')::boolean AS checked,
           string_agg(text_node #>> '{text}', '' ORDER BY text_ord) AS item_text
         FROM jsonb_path_query(
-          (SELECT content FROM milkdown_engine_md_documents WHERE id = :id),
+          (SELECT content FROM milkdown_engine_documents WHERE id = :id),
           'strict $.** ? (@.type == "list_item" && @.attrs.checked != null)'
         ) WITH ORDINALITY AS items(item, item_ord),
         jsonb_path_query(item, 'strict $.** ? (@.type == "text")') WITH ORDINALITY AS texts(text_node, text_ord)
@@ -46,7 +56,7 @@ module MilkdownEngine
           heading #>> '{attrs,id}'                AS id,
           string_agg(text_node #>> '{text}', '' ORDER BY text_ord) AS heading_text
         FROM jsonb_path_query(
-          (SELECT content FROM milkdown_engine_md_documents WHERE id = :id),
+          (SELECT content FROM milkdown_engine_documents WHERE id = :id),
           'strict $.** ? (@.type == "heading")'
         ) WITH ORDINALITY AS headings(heading, heading_ord),
         jsonb_path_query(heading, 'strict $.** ? (@.type == "text")') WITH ORDINALITY AS texts(text_node, text_ord)
@@ -69,8 +79,10 @@ module MilkdownEngine
     #
     # Instead we interpolate the quoted id via +:id+ and +connection.quote+.
     def exec_jsonb_query(sql)
-      quoted = sql.gsub(":id", self.class.connection.quote(id))
-      self.class.connection.select_all(quoted)
+      self.class.with_connection do |conn|
+        quoted = sql.gsub(":id", conn.quote(id))
+        conn.select_all(quoted)
+      end
     end
 
     # Walk the ProseMirror JSON tree in Ruby to find the first heading's text.

data/app/views/milkdown_engine/notes/_content_editor.html.ruby

@@ -0,0 +1,3 @@
+Wrapper(id: "content-editor") {
+  text yield
+}

data/app/views/milkdown_engine/notes/_content_form.html.ruby

@@ -0,0 +1,3 @@
+Form(model: note, url: note.persisted? ? note_path(note) : notes_path, data: { controller: "milkdown-engine--auto-submit", action: "milkdown-engine--editor:change->milkdown-engine--auto-submit#submit" }) {
+  MilkdownEditor(:content)
+}

data/app/views/milkdown_engine/notes/_form.html.ruby

@@ -0,0 +1,27 @@
+output_buffer << form_with(model: note, url: note.persisted? ? note_path(note) : notes_path, html: { class: "ui form" }) { |f|
+  if note.errors.any?
+    Message(type: :error) { |c|
+      c.header { text pluralize(note.errors.count, "error") + " prohibited this note from being saved" }
+      note.errors.full_messages.each { |msg| output_buffer << tag.p(msg) }
+    }
+  end
+
+  output_buffer << tag.div(class: "field") {
+    safe_join([
+      f.label(:title),
+      tag.input(type: "text", name: "document[title]", value: note.title, placeholder: "Auto-filled from first heading if blank")
+    ])
+  }
+
+  output_buffer << tag.div(class: "field") {
+    safe_join([
+      tag.label("Content"),
+      milkdown_editor_field(f, :content)
+    ])
+  }
+
+  Divider(hidden: true)
+  Button(variant: :primary, type: :submit, icon: "save") {
+    text note.persisted? ? "Update note" : "Create note"
+  }
+}

data/app/views/milkdown_engine/notes/_item_list_panel.html.ruby

@@ -0,0 +1,22 @@
+Wrapper(id: "item-list-panel", data: { turbo_permanent: true, controller: "milkdown-engine--item-list", "milkdown-engine--item-list-selected-id-value": (defined?(@note) && @note&.persisted? ? @note.id : 0) }) {
+  Wrapper(id: "item-list-header") {
+    HStack(spacing: 8, justify: "between", align: "center") {
+      Header(size: :h3) { text "Notes" }
+      Button(href: new_note_path, size: :mini, icon: "plus", variant: :primary)
+    }
+  }
+
+  Wrapper(id: "item-list-search") {
+    output_buffer << search_form_for(@q, url: notes_path, html: { class: "ui form", data: { turbo_frame: "notes-list", controller: "milkdown-engine--auto-submit", action: "input->milkdown-engine--auto-submit#submit" } }) { |f|
+      Input(fluid: true, icon: "search", placeholder: "Search…", name: "q[title_cont]", value: params.dig(:q, :title_cont))
+    }
+  }
+
+  output_buffer << turbo_frame_tag("notes-list") {
+    Wrapper(id: "item-list-scroll") {
+      @notes.each do |note|
+        Partial("note_card", note: note)
+      end
+    }
+  }
+}

data/app/views/milkdown_engine/notes/_navigation_rail.html.ruby

@@ -0,0 +1,30 @@
+Wrapper(id: "navigation-rail") {
+  Wrapper(id: "navigation-rail-search") {
+    Input(fluid: true, icon: "search", placeholder: "Search tags…")
+  }
+
+  Wrapper(html_class: "rail-section-label") { text "Views" }
+
+  Wrapper(id: "navigation-rail-views") {
+    Menu(vertical: true) {
+      MenuItem(active: true, icon: "list") { text "Notes" }
+      MenuItem(icon: "folder") { text "Files" }
+      MenuItem(icon: "star") { text "Starred" }
+      MenuItem(icon: "archive") { text "Archived" }
+      MenuItem(icon: "trash") { text "Trash" }
+      MenuItem(icon: "tag") { text "Untagged" }
+    }
+  }
+
+  Wrapper(html_class: "rail-section-label") { text "Tags" }
+
+  Wrapper(id: "navigation-rail-tags") {
+    Menu(vertical: true) {
+      MenuItem(icon: "hashtag") { text "construction" }
+      MenuItem(icon: "hashtag") { text "clients" }
+      MenuItem(icon: "hashtag") { text "invoices" }
+      MenuItem(icon: "hashtag") { text "site-visits" }
+      MenuItem(icon: "hashtag") { text "materials" }
+    }
+  }
+}

data/app/views/milkdown_engine/notes/_note_card.html.ruby

@@ -0,0 +1,9 @@
+Link(href: edit_note_path(note), data: { turbo_frame: "_top", action: "click->milkdown-engine--item-list#select" }) {
+  Wrapper(html_class: "note-card", data: { "milkdown-engine--item-list-target": "item", note_id: note.id }) {
+    Wrapper(html_class: "note-card-title") { text note.title.presence || "Untitled" }
+    Wrapper(html_class: "note-card-meta") { text note.updated_at.strftime("%A, %d %b %Y") }
+    note.tag_list.each do |t|
+      output_buffer << tag.span(t, class: "note-card-tag")
+    end
+  }
+}

data/app/views/milkdown_engine/notes/_title_form.html.ruby

@@ -0,0 +1,3 @@
+Form(model: note, url: note.persisted? ? note_path(note) : notes_path, data: { controller: "milkdown-engine--auto-submit", action: "input->milkdown-engine--auto-submit#submit" }) {
+  Input(transparent: true, fluid: true, name: "document[title]", value: note.title, placeholder: "Untitled")
+}

data/app/views/milkdown_engine/notes/edit.html.ruby

@@ -0,0 +1,11 @@
+Wrapper(id: "md-app") {
+  Partial("milkdown_engine/notes/item_list_panel")
+  Partial("milkdown_engine/notes/content_editor") {
+    Wrapper(html_class: "editor-title-bar") {
+      Partial("title_form", note: @note)
+    }
+    Wrapper(html_class: "editor-content") {
+      Partial("content_form", note: @note)
+    }
+  }
+}

data/app/views/milkdown_engine/notes/index.html.ruby

@@ -0,0 +1,11 @@
+Wrapper(id: "md-app") {
+  Partial("milkdown_engine/notes/item_list_panel")
+  Partial("milkdown_engine/notes/content_editor") {
+    Wrapper(html_class: "editor-title-bar") {
+      Partial("title_form", note: @note)
+    }
+    Wrapper(html_class: "editor-content") {
+      Partial("content_form", note: @note)
+    }
+  }
+}

data/app/views/milkdown_engine/notes/new.html.ruby

@@ -0,0 +1,11 @@
+Wrapper(id: "md-app") {
+  Partial("milkdown_engine/notes/item_list_panel")
+  Partial("milkdown_engine/notes/content_editor") {
+    Wrapper(html_class: "editor-title-bar") {
+      Partial("title_form", note: @note)
+    }
+    Wrapper(html_class: "editor-content") {
+      Partial("content_form", note: @note)
+    }
+  }
+}

data/app/views/milkdown_engine/notes/show.html.ruby

@@ -0,0 +1,11 @@
+Wrapper(id: "md-app") {
+  Partial("milkdown_engine/notes/item_list_panel")
+  Partial("milkdown_engine/notes/content_editor") {
+    Wrapper(html_class: "editor-title-bar") {
+      Partial("title_form", note: @note)
+    }
+    Wrapper(html_class: "editor-content") {
+      Partial("content_form", note: @note)
+    }
+  }
+}

data/config/importmap.rb

@@ -3,6 +3,9 @@
 # Vendored Milkdown bundle (built by esbuild from src/)
 pin "milkdown_engine/milkdown", to: "milkdown_engine/milkdown.min.js"
 
+# Vendored dependencies
+pin "@stimulus-components/auto-submit", to: "@stimulus-components--auto-submit.js"
+
 # MilkdownEngine Stimulus controllers
 pin_all_from MilkdownEngine::Engine.root.join("app/javascript/milkdown_engine/controllers"),
   under: "controllers/milkdown_engine", to: "milkdown_engine/controllers"

data/config/routes.rb

@@ -1,4 +1,5 @@
 # frozen_string_literal: true
 
 MilkdownEngine::Engine.routes.draw do
+  resources :notes
 end

data/db/migrate/20260327000000_create_acts_as_taggable_on_tables.rb

@@ -0,0 +1,40 @@
+# frozen_string_literal: true
+
+# Consolidated migration for acts-as-taggable-on (v13).
+# Creates both `tags` and `taggings` tables with all required indexes.
+
+class CreateActsAsTaggableOnTables < ActiveRecord::Migration[8.1]
+  def change
+    create_table :tags do |t|
+      t.string  :name, null: false
+      t.integer :taggings_count, default: 0
+      t.timestamps
+    end
+
+    add_index :tags, :name, unique: true
+
+    create_table :taggings do |t|
+      t.references :tag, null: false, foreign_key: true
+      t.references :taggable, polymorphic: true
+      t.references :tagger,   polymorphic: true
+      t.string     :context, limit: 128
+      t.datetime   :created_at
+    end
+
+    add_index :taggings,
+              %i[tag_id taggable_id taggable_type context tagger_id tagger_type],
+              unique: true, name: "taggings_idx"
+
+    add_index :taggings,
+              %i[taggable_id taggable_type context],
+              name: "taggings_taggable_context_idx"
+
+    add_index :taggings, %i[tagger_id tagger_type]
+
+    add_index :taggings,
+              %i[taggable_id taggable_type tagger_id context],
+              name: "taggings_idy"
+
+    add_index :taggings, :context
+  end
+end

data/db/migrate/20260327100000_rename_md_documents_to_documents.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+class RenameMdDocumentsToDocuments < ActiveRecord::Migration[8.1]
+  def change
+    rename_table :milkdown_engine_md_documents, :milkdown_engine_documents
+  end
+end

data/lib/milkdown_engine/engine.rb

@@ -6,6 +6,11 @@ module MilkdownEngine
   class Engine < ::Rails::Engine
     isolate_namespace MilkdownEngine
 
+    initializer "milkdown_engine.dependencies" do
+      require "acts-as-taggable-on"
+      require "ransack"
+    end
+
     # Register importmap pins for Stimulus controllers
     initializer "milkdown_engine.importmap", before: "importmap" do |app|
       if app.config.respond_to?(:importmap)
@@ -23,6 +28,9 @@ module MilkdownEngine
       # importmap pin_all_from URLs resolve through the asset pipeline.
       app.config.assets.paths << Engine.root.join("app/javascript")
 
+      # Vendored JS packages
+      app.config.assets.paths << Engine.root.join("vendor/javascript")
+
       # rails-active-ui ships stylesheets.css directly in app/assets/
       app.config.assets.paths << Ui::Engine.root.join("app/assets")
     end

data/lib/milkdown_engine/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module MilkdownEngine
-  VERSION = "0.1.1"
+  VERSION = "0.1.2"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: milkdown_engine
 version: !ruby/object:Gem::Version
-  version: 0.1.1
+  version: 0.1.2
 platform: ruby
 authors:
 - Nathan Kidd
@@ -65,6 +65,34 @@ dependencies:
     - - ">="
       - !ruby/object:Gem::Version
         version: '0'
+- !ruby/object:Gem::Dependency
+  name: acts-as-taggable-on
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '13.0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '13.0'
+- !ruby/object:Gem::Dependency
+  name: ransack
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
 description: Provides a Milkdown-based rich markdown editor as a Rails engine with
   Stimulus controllers, importmap integration, and rails-active-ui components.
 email:
@@ -140,13 +168,29 @@ files:
 - app/assets/stylesheets/milkdown_engine/fonts/KaTeX_Typewriter-Regular.woff2
 - app/assets/stylesheets/milkdown_engine/milkdown.css
 - app/controllers/milkdown_engine/application_controller.rb
+- app/controllers/milkdown_engine/notes_controller.rb
 - app/helpers/milkdown_engine/application_helper.rb
+- app/javascript/milkdown_engine/controllers/auto_submit_controller.js
 - app/javascript/milkdown_engine/controllers/editor_controller.js
+- app/javascript/milkdown_engine/controllers/item_list_controller.js
 - app/models/milkdown_engine/application_record.rb
-- app/models/milkdown_engine/md_document.rb
+- app/models/milkdown_engine/document.rb
+- app/views/milkdown_engine/notes/_content_editor.html.ruby
+- app/views/milkdown_engine/notes/_content_form.html.ruby
+- app/views/milkdown_engine/notes/_form.html.ruby
+- app/views/milkdown_engine/notes/_item_list_panel.html.ruby
+- app/views/milkdown_engine/notes/_navigation_rail.html.ruby
+- app/views/milkdown_engine/notes/_note_card.html.ruby
+- app/views/milkdown_engine/notes/_title_form.html.ruby
+- app/views/milkdown_engine/notes/edit.html.ruby
+- app/views/milkdown_engine/notes/index.html.ruby
+- app/views/milkdown_engine/notes/new.html.ruby
+- app/views/milkdown_engine/notes/show.html.ruby
 - config/importmap.rb
 - config/routes.rb
 - db/migrate/20260325000000_create_milkdown_engine_md_documents.rb
+- db/migrate/20260327000000_create_acts_as_taggable_on_tables.rb
+- db/migrate/20260327100000_rename_md_documents_to_documents.rb
 - lib/milkdown_engine.rb
 - lib/milkdown_engine/engine.rb
 - lib/milkdown_engine/version.rb