canvas_erd 0.1.0 → 0.3.0

data/lib/canvas_erd/web/index.html

@@ -66,6 +66,14 @@
               <div><dt>New</dt><dd><kbd>⌘/Ctrl</kbd> <kbd>N</kbd></dd></div>
               <div><dt>Save</dt><dd><kbd>⌘/Ctrl</kbd> <kbd>S</kbd></dd></div>
               <div><dt>Add note at cursor</dt><dd><kbd>N</kbd></dd></div>
+              <div><dt>Add code at cursor</dt><dd><kbd>C</kbd></dd></div>
+              <div><dt>Bold note</dt><dd><kbd>⌘/Ctrl</kbd> <kbd>B</kbd></dd></div>
+              <div><dt>Italic note</dt><dd><kbd>⌘/Ctrl</kbd> <kbd>I</kbd></dd></div>
+              <div><dt>Underline note</dt><dd><kbd>⌘/Ctrl</kbd> <kbd>U</kbd></dd></div>
+              <div><dt>Title style</dt><dd><kbd>⌘/Ctrl</kbd> <kbd>Alt</kbd> <kbd>1</kbd></dd></div>
+              <div><dt>Heading style</dt><dd><kbd>⌘/Ctrl</kbd> <kbd>Alt</kbd> <kbd>2</kbd></dd></div>
+              <div><dt>Paragraph style</dt><dd><kbd>⌘/Ctrl</kbd> <kbd>Alt</kbd> <kbd>3</kbd></dd></div>
+              <div><dt>Code style</dt><dd><kbd>⌘/Ctrl</kbd> <kbd>Alt</kbd> <kbd>4</kbd></dd></div>
               <div><dt>Arrow tool</dt><dd><kbd>A</kbd></dd></div>
               <div><dt>Free arrow endpoint</dt><dd><kbd>Ctrl</kbd></dd></div>
               <div><dt>Toggle tables</dt><dd><kbd>T</kbd></dd></div>
@@ -76,6 +84,203 @@
               <div><dt>Shortcut help</dt><dd><kbd>?</kbd></dd></div>
             </dl>
           </div>
+          <div id="note-formatting" class="note-formatting" role="toolbar" aria-label="Note formatting" hidden>
+            <button id="note-bold" class="format-button note-bold" type="button" aria-label="Bold" title="Bold (⌘/Ctrl-B)" aria-pressed="false">B</button>
+            <button id="note-italic" class="format-button note-italic" type="button" aria-label="Italic" title="Italic (⌘/Ctrl-I)" aria-pressed="false">I</button>
+            <button id="note-underline" class="format-button note-underline" type="button" aria-label="Underline" title="Underline (⌘/Ctrl-U)" aria-pressed="false">U</button>
+            <div class="color-control">
+              <button id="note-text-color-button" class="note-color-button" type="button" aria-label="Text color" title="Text color" aria-expanded="false">
+                <span id="note-text-color-preview" class="color-preview" aria-hidden="true"></span>
+                <span>Text</span>
+              </button>
+              <div id="note-text-color-menu" class="color-menu" hidden>
+                <div id="note-text-color-swatches" class="color-swatches" role="group" aria-label="Text color swatches"></div>
+                <label class="custom-color">
+                  <span>Custom…</span>
+                  <input id="note-text-custom-color" type="color" value="#374151" aria-label="Custom text color">
+                </label>
+              </div>
+            </div>
+            <div class="color-control">
+              <button id="note-background-color-button" class="note-color-button" type="button" aria-label="Background color" title="Background color" aria-expanded="false">
+                <span id="note-background-color-preview" class="color-preview" aria-hidden="true"></span>
+                <span>Fill</span>
+              </button>
+              <div id="note-background-color-menu" class="color-menu" hidden>
+                <div id="note-background-color-swatches" class="color-swatches" role="group" aria-label="Background color swatches"></div>
+                <div class="color-menu-actions">
+                  <button id="note-background-transparent" class="transparent-option" type="button" aria-label="Transparent background" aria-pressed="false">
+                    <span class="color-preview transparent-color" aria-hidden="true"></span>
+                  </button>
+                  <label class="custom-color">
+                    <span>Custom…</span>
+                    <input id="note-background-custom-color" type="color" value="#fff2a8" aria-label="Custom background color">
+                  </label>
+                </div>
+              </div>
+            </div>
+            <label class="note-format-field">
+              <span>Style</span>
+              <select id="note-paragraph-style" aria-label="Paragraph style">
+                <option value="title">Title</option>
+                <option value="heading">Heading</option>
+                <option value="paragraph" selected>Paragraph</option>
+                <option value="code">Code</option>
+              </select>
+            </label>
+            <label class="note-format-field">
+              <span>Align</span>
+              <select id="note-alignment" aria-label="Text alignment">
+                <option value="left">Left</option>
+                <option value="center">Center</option>
+                <option value="right">Right</option>
+              </select>
+            </label>
+          </div>
+          <div id="table-formatting" class="table-formatting" role="toolbar" aria-label="Table formatting" hidden>
+            <div class="color-control">
+              <button id="table-header-color-button" class="note-color-button" type="button" aria-label="Table header color" title="Table header color" aria-expanded="false">
+                <span id="table-header-color-preview" class="color-preview" aria-hidden="true"></span>
+                <span>Header</span>
+              </button>
+              <div id="table-header-color-menu" class="color-menu" hidden>
+                <div id="table-header-color-swatches" class="color-swatches" role="group" aria-label="Table header color swatches"></div>
+                <label class="custom-color">
+                  <span>Custom…</span>
+                  <input id="table-header-custom-color" type="color" value="#243b63" aria-label="Custom table header color">
+                </label>
+              </div>
+            </div>
+          </div>
+          <div id="arrow-formatting" class="arrow-formatting" role="toolbar" aria-label="Arrow formatting" hidden>
+            <div class="color-control">
+              <button id="arrow-color-button" class="note-color-button" type="button" aria-label="Arrow color" title="Arrow color" aria-expanded="false">
+                <span id="arrow-color-preview" class="color-preview" aria-hidden="true"></span>
+                <span>Color</span>
+              </button>
+              <div id="arrow-color-menu" class="color-menu" hidden>
+                <div id="arrow-color-swatches" class="color-swatches" role="group" aria-label="Arrow color swatches"></div>
+                <label class="custom-color">
+                  <span>Custom…</span>
+                  <input id="arrow-custom-color" type="color" value="#243b63" aria-label="Custom arrow color">
+                </label>
+              </div>
+            </div>
+            <label class="note-format-field">
+              <span>Start</span>
+              <select id="arrow-start-head" aria-label="Start arrowhead">
+                <option value="none" selected>None</option>
+                <option value="open">Arrow — open</option>
+                <option value="filled">Arrow — closed</option>
+                <option value="circle-open">Circle — open</option>
+                <option value="circle">Circle — closed</option>
+                <option value="diamond-open">Diamond — open</option>
+                <option value="diamond">Diamond — closed</option>
+              </select>
+            </label>
+            <label class="note-format-field">
+              <span>End</span>
+              <select id="arrow-end-head" aria-label="End arrowhead">
+                <option value="none">None</option>
+                <option value="open">Arrow — open</option>
+                <option value="filled" selected>Arrow — closed</option>
+                <option value="circle-open">Circle — open</option>
+                <option value="circle">Circle — closed</option>
+                <option value="diamond-open">Diamond — open</option>
+                <option value="diamond">Diamond — closed</option>
+              </select>
+            </label>
+            <label class="note-format-field">
+              <span>Line</span>
+              <select id="arrow-line-style" aria-label="Arrow line style">
+                <option value="solid" selected>Solid</option>
+                <option value="dashed">Dashed</option>
+                <option value="dotted">Dotted</option>
+              </select>
+            </label>
+            <label class="note-format-field">
+              <span>Width</span>
+              <input id="arrow-stroke-width" type="number" min="0.5" max="20" step="0.25" value="2.25" aria-label="Arrow line width">
+            </label>
+          </div>
+          <div id="frame-formatting" class="frame-formatting" role="toolbar" aria-label="Frame formatting" hidden>
+            <div class="color-control">
+              <button id="frame-color-button" class="note-color-button" type="button" aria-label="Frame color" title="Frame color" aria-expanded="false">
+                <span id="frame-color-preview" class="color-preview" aria-hidden="true"></span>
+                <span>Color</span>
+              </button>
+              <div id="frame-color-menu" class="color-menu" hidden>
+                <div id="frame-color-swatches" class="color-swatches" role="group" aria-label="Frame color swatches"></div>
+                <label class="custom-color">
+                  <span>Custom…</span>
+                  <input id="frame-custom-color" type="color" value="#243b63" aria-label="Custom frame color">
+                </label>
+              </div>
+            </div>
+            <label class="note-format-field">
+              <span>Border</span>
+              <select id="frame-line-style" aria-label="Frame border style">
+                <option value="solid" selected>Solid</option>
+                <option value="dashed">Dashed</option>
+                <option value="dotted">Dotted</option>
+              </select>
+            </label>
+          </div>
+          <div id="code-formatting" class="code-formatting" role="toolbar" aria-label="Code formatting" hidden>
+            <label class="note-format-field">
+              <span>Language</span>
+              <select id="code-language" aria-label="Code language"></select>
+            </label>
+            <label class="note-format-field">
+              <span>Size</span>
+              <select id="code-size" aria-label="Code font size">
+                <option value="small">Small</option>
+                <option value="medium" selected>Medium</option>
+                <option value="large">Large</option>
+              </select>
+            </label>
+            <button id="code-line-numbers"class="format-button" type="button" aria-label="Line numbers" title="Line numbers" aria-pressed="false">#</button>
+            <span id="code-source" class="code-source" hidden></span>
+            <div id="code-source-fields" class="code-source-fields" hidden>
+              <label class="note-format-field">
+                <span>Path</span>
+                <input id="code-source-path" class="source-path-input" type="text" list="source-file-paths" autocomplete="off" aria-label="Source file path">
+              </label>
+              <label class="note-format-field">
+                <span>Lines</span>
+                <input id="code-source-start" class="line-input" type="number" min="1" placeholder="1" aria-label="Start line">
+              </label>
+              <label class="note-format-field">
+                <span>to</span>
+                <input id="code-source-end" class="line-input" type="number" min="1" placeholder="end" aria-label="End line">
+              </label>
+            </div>
+          </div>
+          <datalist id="source-file-paths"></datalist>
+          <dialog id="source-dialog" class="source-dialog" aria-labelledby="source-dialog-title">
+            <form id="source-form">
+              <h2 id="source-dialog-title">Add source file</h2>
+              <label class="source-field">
+                <span>Path</span>
+                <input id="source-path" class="source-path-input" type="text" list="source-file-paths" autocomplete="off" placeholder="app/models/book.rb" required>
+              </label>
+              <div class="source-lines">
+                <label class="source-field">
+                  <span>Start line</span>
+                  <input id="source-start" class="line-input" type="number" min="1" placeholder="1">
+                </label>
+                <label class="source-field">
+                  <span>End line</span>
+                  <input id="source-end" class="line-input" type="number" min="1" placeholder="end">
+                </label>
+              </div>
+              <p id="source-error" class="source-error" role="alert" hidden></p>
+              <div class="source-actions">
+                <button id="source-cancel" type="button">Cancel</button>
+                <button id="source-submit" type="submit">Add</button>
+              </div>
+            </form>
+          </dialog>
           <div class="canvas-tools" aria-label="Canvas tools">
             <button id="toggle-tables" class="icon-button" type="button" aria-label="Show tables" title="Show tables (T)" aria-expanded="false">
               <svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" color="#000000" aria-hidden="true" focusable="false"><path d="M3 20.4V3.6C3 3.26863 3.26863 3 3.6 3H20.4C20.7314 3 21 3.26863 21 3.6V20.4C21 20.7314 20.7314 21 20.4 21H3.6C3.26863 21 3 20.7314 3 20.4Z" stroke="#000000" stroke-width="1.5"></path><path d="M3 16.5H21" stroke="#000000" stroke-width="1.5"></path><path d="M3 12H21" stroke="#000000" stroke-width="1.5"></path><path d="M21 7.5H3" stroke="#000000" stroke-width="1.5"></path><path d="M12 21V3" stroke="#000000" stroke-width="1.5"></path></svg>
@@ -83,10 +288,19 @@
             <button id="layout-tables" class="icon-button" type="button" aria-label="Layout tables" title="Layout tables (L)" aria-expanded="false">
               <svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" color="#000000" aria-hidden="true" focusable="false"><path d="M21 3.6V12H12V3H20.4C20.7314 3 21 3.26863 21 3.6Z" stroke="#000000" stroke-width="1.5"></path><path d="M21 20.4V12H12V21H20.4C20.7314 21 21 20.7314 21 20.4Z" stroke="#000000" stroke-width="1.5"></path><path d="M3 12V3.6C3 3.26863 3.26863 3 3.6 3H12V12H3Z" stroke="#000000" stroke-width="1.5"></path><path d="M3 12V20.4C3 20.7314 3.26863 21 3.6 21H12V12H3Z" stroke="#000000" stroke-width="1.5"></path></svg>
             </button>
+            <button id="add-frame" class="icon-button" type="button" aria-label="Frame tool" title="Frame tool" aria-pressed="false">
+              <svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" color="#000000" aria-hidden="true" focusable="false"><rect x="3" y="4" width="18" height="16" rx="1" stroke="#000000" stroke-width="1.5" stroke-dasharray="3 2"></rect><path d="M6 8H12" stroke="#000000" stroke-width="1.5" stroke-linecap="round"></path></svg>
+            </button>
             <button id="add-note" class="icon-button" type="button" aria-label="Add note" title="Add note (N)">
               <svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" color="#000000" aria-hidden="true" focusable="false"><path d="M12 8L12 16M12 8H8M12 8H16" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M21 13.5V19C21 20.1046 20.1046 21 19 21H5C3.89543 21 3 20.1046 3 19V13.5M21 10.5V5C21 3.89543 20.1046 3 19 3H5C3.89543 3 3 3.89543 3 5V10.5" stroke="#000000" stroke-width="1.5" stroke-linejoin="round"></path><path d="M19.5 13.5V10.5H22.5V13.5H19.5Z" stroke="#000000" stroke-width="1.5" stroke-linejoin="round"></path><path d="M1.5 13.5V10.5H4.5V13.5H1.5Z" stroke="#000000" stroke-width="1.5" stroke-linejoin="round"></path></svg>
             </button>
-            <button id="add-arrow" class="icon-button" type="button" aria-label="Arrow tool" title="Arrow tool (A) · Double-click an arrow to edit endpoints · Hold Ctrl for a free endpoint" aria-pressed="false">
+            <button id="add-code" class="icon-button" type="button" aria-label="Add code" title="Add code (C)">
+              <svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" color="#000000" aria-hidden="true" focusable="false"><path d="M13.5 6L10 18.5" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M6.5 8.5L3 12L6.5 15.5" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M17.5 8.5L21 12L17.5 15.5" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>
+            </button>
+            <button id="add-source" class="icon-button" type="button" aria-label="Add source file" title="Add source file">
+              <svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" color="#000000" aria-hidden="true" focusable="false"><path d="M4 21.4V2.6C4 2.26863 4.26863 2 4.6 2H16.2515C16.4106 2 16.5632 2.06321 16.6757 2.17574L19.8243 5.32426C19.9368 5.43679 20 5.5894 20 5.74853V21.4C20 21.7314 19.7314 22 19.4 22H4.6C4.26863 22 4 21.7314 4 21.4Z" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M8 10L16 10" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M8 18L16 18" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M8 14L12 14" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M16 2V5.4C16 5.73137 16.2686 6 16.6 6H20" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>
+            </button>
+            <button id="add-arrow" class="icon-button" type="button" aria-label="Arrow tool" title="Arrow tool (A) · Select an arrow to edit endpoints · Hold Ctrl for a free endpoint" aria-pressed="false">
               <svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" color="#000000" aria-hidden="true" focusable="false"><path d="M6.00005 19L19 5.99996M19 5.99996V18.48M19 5.99996H6.52005" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>
             </button>
           </div>

data/lib/canvas_erd/web/styles.css

@@ -321,6 +321,217 @@ select:focus-visible {
   box-shadow: 0 5px 18px rgba(15, 23, 42, 0.12);
 }
 
+.note-formatting,
+.table-formatting,
+.arrow-formatting,
+.frame-formatting,
+.code-formatting {
+  position: absolute;
+  bottom: 4rem;
+  left: 50%;
+  z-index: 2;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: 0.25rem;
+  max-width: calc(100% - 1.5rem);
+  border: 1px solid rgba(203, 213, 225, 0.9);
+  border-radius: 0.75rem;
+  background: rgba(255, 255, 255, 0.96);
+  padding: 0.35rem;
+  transform: translateX(-50%);
+  box-shadow: 0 5px 18px rgba(15, 23, 42, 0.12);
+}
+
+.format-button {
+  width: 2.25rem;
+  padding: 0;
+}
+
+.format-button[aria-pressed="true"] {
+  border-color: #2563eb;
+  color: #1d4ed8;
+  background: #eff6ff;
+}
+
+.note-bold {
+  font-weight: 700;
+}
+
+.note-italic {
+  font-style: italic;
+}
+
+.note-underline {
+  text-decoration: underline;
+}
+
+.note-format-field {
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+  min-height: 2.25rem;
+  color: #526277;
+  padding: 0 0.35rem;
+  font-size: 0.72rem;
+}
+
+.color-control {
+  position: relative;
+}
+
+.note-color-button {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  padding: 0.35rem 0.55rem;
+  font-size: 0.72rem;
+}
+
+.color-preview {
+  width: 1.15rem;
+  height: 1.15rem;
+  border: 1px solid rgba(15, 23, 42, 0.25);
+  border-radius: 0.25rem;
+  background: #ffffff;
+}
+
+.transparent-color {
+  background-color: #ffffff !important;
+  background-image:
+    linear-gradient(45deg, #cbd5e1 25%, transparent 25%),
+    linear-gradient(-45deg, #cbd5e1 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, #cbd5e1 75%),
+    linear-gradient(-45deg, transparent 75%, #cbd5e1 75%);
+  background-position: 0 0, 0 5px, 5px -5px, -5px 0;
+  background-size: 10px 10px;
+}
+
+.mixed-color {
+  background-color: #ffffff !important;
+  background-image: linear-gradient(135deg, #243b63 50%, #9a3412 50%);
+}
+
+.color-menu {
+  position: absolute;
+  bottom: calc(100% + 0.55rem);
+  left: 50%;
+  width: 11.5rem;
+  border: 1px solid #cbd3df;
+  border-radius: 0.6rem;
+  background: #ffffff;
+  padding: 0.55rem;
+  transform: translateX(-50%);
+  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.16);
+}
+
+.color-swatches {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 0.4rem;
+}
+
+.color-swatch {
+  width: 2.2rem;
+  min-height: 2.2rem;
+  border-color: rgba(15, 23, 42, 0.25);
+  padding: 0;
+}
+
+.color-swatch[aria-pressed="true"] {
+  outline: 2px solid #2563eb;
+  outline-offset: 1px;
+}
+
+.swatch-separator {
+  grid-column: 1 / -1;
+  height: 1px;
+  margin: 0.15rem 0;
+  background: #e2e8f0;
+}
+
+.color-menu-actions {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 0.4rem;
+  margin-top: 0.55rem;
+  border-top: 1px solid #e2e8f0;
+  padding-top: 0.55rem;
+}
+
+.transparent-option {
+  display: flex;
+  width: 2.25rem;
+  min-width: 2.25rem;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+}
+
+.transparent-option[aria-pressed="true"] {
+  border-color: #2563eb;
+  color: #1d4ed8;
+  background: #eff6ff;
+}
+
+.color-menu-actions .custom-color {
+  min-width: 0;
+  width: 100%;
+  margin: 0;
+  border: 1px solid #cbd3df;
+  border-radius: 0.45rem;
+  padding: 0.25rem 0.35rem;
+  font-size: 0.68rem;
+}
+
+.custom-color {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  margin-top: 0.55rem;
+  border-top: 1px solid #e2e8f0;
+  color: #526277;
+  cursor: pointer;
+  padding-top: 0.55rem;
+  font-size: 0.75rem;
+}
+
+.custom-color input {
+  width: 2rem;
+  height: 1.65rem;
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+  padding: 0;
+}
+
+.note-format-field select {
+  min-height: 1.9rem;
+  border: 1px solid #cbd3df;
+  border-radius: 0.35rem;
+  color: #263447;
+  background: #ffffff;
+  padding: 0.2rem 0.35rem;
+}
+
+#arrow-stroke-width,
+.source-path-input,
+.line-input {
+  width: 4rem;
+  min-height: 1.9rem;
+  border: 1px solid #cbd3df;
+  border-radius: 0.35rem;
+  color: #263447;
+  background: #ffffff;
+  padding: 0.2rem 0.35rem;
+}
+
+#note-paragraph-style {
+  max-width: 7.5rem;
+}
+
 .canvas-panel .canvas-container {
   position: absolute !important;
   inset: 0;
@@ -437,3 +648,87 @@ kbd {
   border-color: #fecaca;
   background: #fff7f7;
 }
+
+.code-source {
+  color: #526277;
+  padding: 0 0.35rem;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 0.72rem;
+}
+
+.detail-toggle {
+  min-height: 1.4rem;
+  margin-left: auto;
+  border-radius: 999px;
+  color: #526277;
+  padding: 0 0.5rem;
+  font-size: 0.7rem;
+}
+
+.detail-toggle[aria-pressed="true"] {
+  border-color: #2563eb;
+  color: #1d4ed8;
+  background: #eff6ff;
+}
+
+.code-source-fields {
+  display: flex;
+  align-items: center;
+}
+
+.note-format-field .source-path-input {
+  width: 18rem;
+}
+
+.source-dialog {
+  width: min(32rem, calc(100% - 2rem));
+  border: 1px solid rgba(203, 213, 225, 0.9);
+  border-radius: 0.75rem;
+  color: #263447;
+  padding: 1rem;
+  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.2);
+}
+
+.source-dialog::backdrop {
+  background: rgba(15, 23, 42, 0.2);
+}
+
+.source-dialog h2 {
+  margin: 0 0 0.8rem;
+  color: #172554;
+  font-size: 0.95rem;
+}
+
+.source-field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.3rem;
+  color: #526277;
+  font-size: 0.75rem;
+}
+
+.source-dialog .source-path-input,
+.source-dialog .line-input {
+  width: 100%;
+  min-height: 2.25rem;
+}
+
+.source-lines {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.75rem;
+  margin-top: 0.75rem;
+}
+
+.source-error {
+  margin: 0.75rem 0 0;
+  color: #b91c1c;
+  font-size: 0.8rem;
+}
+
+.source-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  margin-top: 1rem;
+}

data/lib/canvas_erd.rb

@@ -5,6 +5,9 @@ require "canvas_erd/diagram"
 require "canvas_erd/schema_provider"
 require "canvas_erd/png_document"
 require "canvas_erd/diagram_store"
+require "canvas_erd/highlighter"
+require "canvas_erd/source_files"
+require "canvas_erd/model_details"
 require "canvas_erd/application_loader"
 require "canvas_erd/browser"
 require "canvas_erd/server"

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: canvas_erd
 version: !ruby/object:Gem::Version
-  version: 0.1.0
+  version: 0.3.0
 platform: ruby
 authors:
 - Marc Heiligers
@@ -43,6 +43,26 @@ dependencies:
     - - "<"
       - !ruby/object:Gem::Version
         version: '4'
+- !ruby/object:Gem::Dependency
+  name: rouge
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '4.0'
+    - - "<"
+      - !ruby/object:Gem::Version
+        version: '6'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '4.0'
+    - - "<"
+      - !ruby/object:Gem::Version
+        version: '6'
 - !ruby/object:Gem::Dependency
   name: minitest
   requirement: !ruby/object:Gem::Requirement
@@ -110,9 +130,12 @@ files:
 - lib/canvas_erd/cli.rb
 - lib/canvas_erd/diagram.rb
 - lib/canvas_erd/diagram_store.rb
+- lib/canvas_erd/highlighter.rb
+- lib/canvas_erd/model_details.rb
 - lib/canvas_erd/png_document.rb
 - lib/canvas_erd/schema_provider.rb
 - lib/canvas_erd/server.rb
+- lib/canvas_erd/source_files.rb
 - lib/canvas_erd/version.rb
 - lib/canvas_erd/web/app.js
 - lib/canvas_erd/web/document.js
@@ -142,14 +165,14 @@ required_ruby_version: !ruby/object:Gem::Requirement
   requirements:
   - - ">="
     - !ruby/object:Gem::Version
-      version: '3.1'
+      version: '3.3'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
   - - ">="
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 4.0.16
+rubygems_version: 4.0.20
 specification_version: 4
 summary: Edit Rails ERD diagrams on an interactive canvas
 test_files: []