From https://once.com/writebook

app/views/leafables/_edit_header.html.erb

@@ -0,0 +1,18 @@
+<nav>
+  <%= link_to_previous_leafable(leaf, hotkey: false, for_edit: true) %>
+
+  <div class="breadcrumbs">
+    <%= render "books/index_link" %>
+    <span class="flex-item-no-shrink">▸</span>
+    <%= link_to book.title, book_slug_path(book) %>
+    <span class="flex-item-no-shrink">▸</span>
+    <%= form_with model: [ book, leaf ], url: leafable_path(leaf), class: "flex align-center gap-half", format: :html do |form| %>
+      <strong class="min-width"><%= form.text_field :title, form: "leafable-editor", class: "input full-width", autocomplete: "off" %></strong>
+    <% end %>
+  </div>
+
+  <button class="btn" data-action="fullscreen#toggle" data-fullscreen-target="button">
+    <%= image_tag "expand.svg", aria: { hidden: true }, size: 24 %>
+    <span class="for-screen-reader">Enter fullscreen</span>
+  </button>
+</nav>

app/views/leafables/create.turbo_stream.erb

@@ -0,0 +1,7 @@
+<% if params[:position].present? %>
+  <%= turbo_stream.replace :dragged_item, partial: "leaves/edit", locals: { leaf: @leaf } %>
+<% else %>
+  <%= turbo_stream.append :leaves, partial: "leaves/edit", locals: { leaf: @leaf } %>
+<% end %>
+
+<%= turbo_stream.scroll_into_view @leaf, animation: :wiggle %>

app/views/leafables/destroy.turbo_stream.erb

@@ -0,0 +1 @@
+<%= turbo_stream.remove @leaf %>

app/views/leafables/show.html.erb

@@ -0,0 +1,36 @@
+<% content_for(:title) { page_title(@leaf, @book) } %>
+
+<% content_for :header do %>
+  <%= render "leaves/header", book: @book, leaf: @leaf %>
+<% end %>
+
+<% if @leaf.section? %>
+  <div class="page--section <%= "theme--dark" if @leaf.leafable.theme == "dark" %>">
+    <h1><%= simple_format @leaf.section.body %></h1>
+  </div>
+<% elsif @leaf.page? %>
+  <div class="page--page">
+    <%= sanitize_content @leaf.page.body.to_html %>
+  </div>
+<% elsif @leaf.picture? %>
+  <figure class="page--picture flex flex-column align-center gap margin-none">
+    <% if @leaf.picture.image.attached? %>
+      <%= link_to rails_blob_path(@leaf.picture.image), data: {
+            action: "lightbox#open:prevent",
+            lightbox_target: "image",
+            lightbox_url_value: rails_blob_path(@leaf.picture.image, disposition: "attachment", only_path: true) } do %>
+        <%= image_tag @leaf.picture.image.variant(:large), loading: "lazy" %>
+      <% end %>
+    <% else %>
+      <%= image_tag "default-picture.webp", alt: "No image uploaded", loading: "lazy" %>
+    <% end %>
+
+    <figcaption>
+      <%= simple_format @leaf.picture.caption %>
+    </figcaption>
+  </figure>
+<% end %>
+
+<% content_for :footer do %>
+  <%= render "leaves/navigation", leaf: @leaf %>
+<% end %>