htmlboard 0.1.0 → 0.3.0

package/src/client/favicon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" role="img" aria-label="htmlboard"><title>htmlboard</title><rect x="0" y="0" width="16" height="16" rx="3.5" fill="#1C1C1E"/><rect x="1" y="3" width="14" height="1" rx="0.5" fill="#9D9DA3"/><rect x="2" y="5" width="5" height="9" rx="0.8" fill="#FFFFFF"/><rect x="8" y="5" width="7" height="4" rx="0.8" fill="#FFFFFF"/><rect x="4" y="2" width="1" height="4" rx="0.5" fill="#3D9DFF"/><rect x="11" y="2" width="1" height="4" rx="0.5" fill="#3D9DFF"/></svg>

package/src/client/fonts/OFL-bricolage-grotesque.txt

@@ -0,0 +1,93 @@
+Copyright 2022 The Bricolage Grotesque Project Authors (https://github.com/ateliertriay/bricolage)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

package/src/client/fonts/OFL-inter.txt

@@ -0,0 +1,93 @@
+Copyright 2020 The Inter Project Authors (https://github.com/rsms/inter)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

package/src/client/index.html

@@ -1,191 +1,103 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
 <head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
-  <title>HtmlBoard — Design Explorer</title>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="robots" content="noindex">
+  <link rel="icon" href="/__explorer/favicon.svg" type="image/svg+xml">
+  <title>htmlboard</title>
+  <!-- Every design of the project side by side on one canvas you can pan and zoom, like a Figma
+       page. The server lists the designs at /api/designs and pushes saved changes at /api/events.
+       #<design id> opens on that design. -->
   <link rel="stylesheet" href="/__explorer/explorer.css">
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+  <script type="module" src="/__explorer/explorer.js"></script>
 </head>
-<body class="theme-dark">
-  <div id="app">
-    <!-- Top Navigation Toolbar -->
-    <header class="topbar">
-      <div class="topbar-left">
-        <button id="btn-toggle-sidebar" class="btn-icon" title="Toggle Sidebar ([)">
-          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-            <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
-            <line x1="9" y1="3" x2="9" y2="21"/>
-          </svg>
-        </button>
-
-        <div class="brand">
-          <div class="brand-logo">
-            <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
-              <rect x="3" y="3" width="7" height="7" rx="1.5" fill="#6366f1"/>
-              <rect x="14" y="3" width="7" height="7" rx="1.5" fill="#818cf8"/>
-              <rect x="3" y="14" width="7" height="7" rx="1.5" fill="#a855f7"/>
-              <rect x="14" y="14" width="7" height="7" rx="1.5" fill="#ec4899"/>
-            </svg>
-          </div>
-          <span class="brand-name">HtmlBoard</span>
-        </div>
-
-        <div class="project-pill" id="project-title-pill">
-          <span id="project-title">Loading...</span>
-        </div>
+<body>
+  <div class="app" id="app">
+    <aside class="sidebar" aria-label="Designs">
+      <div class="brand">
+        <a class="brand-logo" href="https://github.com/luizcarlos1405/htmlboard" target="_blank" rel="noopener" title="htmlboard on GitHub"><img src="/__explorer/logo.svg" alt="htmlboard" height="18"></a>
+        <span class="version" id="version"></span>
       </div>
-
-      <div class="topbar-center">
-        <!-- Filter Category Tabs -->
-        <div class="filter-tabs" id="filter-tabs">
-          <button class="filter-tab active" data-category="all">All</button>
-          <button class="filter-tab" data-category="desktop">Desktop</button>
-          <button class="filter-tab" data-category="mobile">Mobile</button>
-          <button class="filter-tab" data-category="tablet">Tablet</button>
-          <button class="filter-tab" data-category="components">Components</button>
-        </div>
+      <header class="sidebar-head">
+        <h1 id="title">Designs</h1>
+        <span class="count" id="count"></span>
+      </header>
+      <div class="search">
+        <svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>
+        <input type="search" id="search" placeholder="Search" aria-label="Search the designs" autocomplete="off" spellcheck="false">
+        <kbd aria-hidden="true">/</kbd>
       </div>
+      <div class="filters" id="filters" role="group" aria-label="Show" hidden></div>
+      <p class="no-match" id="no-match" hidden>No design matches the search.</p>
+      <nav class="list" id="list" aria-label="Designs by section"></nav>
+      <p class="sidebar-hint">Drag or scroll to move, <kbd>Ctrl</kbd> + scroll or pinch to zoom, double-click a design to fit it. <kbd>?</kbd> lists the shortcuts.</p>
+    </aside>
 
-      <div class="topbar-right">
-        <!-- Search bar -->
-        <div class="search-box">
-          <svg class="search-icon" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-            <circle cx="11" cy="11" r="8"/>
-            <line x1="21" y1="21" x2="16.65" y2="16.65"/>
-          </svg>
-          <input type="text" id="search-input" placeholder="Search boards... (/)" autocomplete="off" spellcheck="false">
-          <kbd class="search-kbd">/</kbd>
-        </div>
-
-        <!-- Canvas Zoom Controls -->
-        <div class="zoom-controls">
-          <button id="btn-zoom-out" class="btn-icon" title="Zoom Out (-)">
-            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-              <line x1="5" y1="12" x2="19" y2="12"/>
-            </svg>
-          </button>
-          <span id="zoom-level" class="zoom-level-text" title="Click to reset (0)">100%</span>
-          <button id="btn-zoom-in" class="btn-icon" title="Zoom In (+)">
-            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-              <line x1="12" y1="5" x2="12" y2="19"/>
-              <line x1="5" y1="12" x2="19" y2="12"/>
-            </svg>
-          </button>
-          <button id="btn-zoom-fit" class="btn-text" title="Fit to Screen (F)">
-            Fit All
-          </button>
-        </div>
-
-        <!-- Live Status Indicator -->
-        <div class="live-indicator" id="live-indicator" title="Connected for live auto-reload">
-          <span class="live-dot"></span>
-          <span class="live-text">Live</span>
-        </div>
+    <main class="viewport" id="viewport" aria-label="Canvas">
+      <div class="world" id="world"></div>
+      <div class="overlay" id="overlay" aria-hidden="true">
+        <div class="outline outline--hover" id="hover" hidden></div>
+        <div class="outline outline--selected" id="selection" hidden></div>
+        <div class="size" id="size" hidden></div>
+      </div>
 
-        <!-- Help / Shortcuts -->
-        <button id="btn-shortcuts" class="btn-icon" title="Keyboard Shortcuts (?)">
-          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-            <circle cx="12" cy="12" r="10"/>
-            <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/>
-            <line x1="12" y1="17" x2="12.01" y2="17"/>
-          </svg>
+      <div class="toolbar" role="toolbar" aria-label="Canvas">
+        <button class="tool" type="button" id="toggle-list" title="Show or hide the list (\)" aria-label="Show or hide the list" aria-pressed="true">
+          <svg viewBox="0 0 24 24" aria-hidden="true"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M9 3v18"/></svg>
+        </button>
+        <span class="sep" aria-hidden="true"></span>
+        <button class="tool" type="button" id="zoom-out" title="Zoom out (−)" aria-label="Zoom out">
+          <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h14"/></svg>
+        </button>
+        <button class="tool zoom" type="button" id="zoom-reset" title="Zoom to 100% (Shift + 0)" aria-label="Zoom to 100%">100%</button>
+        <button class="tool" type="button" id="zoom-in" title="Zoom in (+)" aria-label="Zoom in">
+          <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h14M12 5v14"/></svg>
+        </button>
+        <button class="tool" type="button" id="fit-all" title="Fit everything (Shift + 1)" aria-label="Fit everything">
+          <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M8 3H5a2 2 0 0 0-2 2v3M21 8V5a2 2 0 0 0-2-2h-3M3 16v3a2 2 0 0 0 2 2h3M16 21h3a2 2 0 0 0 2-2v-3"/></svg>
+        </button>
+        <span class="sep" aria-hidden="true"></span>
+        <a class="tool" id="open" href="#" target="_blank" rel="noopener" title="Open the selected design on its own (Enter)" aria-disabled="true">
+          <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M15 3h6v6M10 14 21 3M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/></svg>
+          <span>Open</span>
+        </a>
+        <button class="tool" type="button" id="reload" title="Reload the designs (R)" aria-label="Reload the designs">
+          <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8M21 3v5h-5M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16M8 16H3v5"/></svg>
+        </button>
+        <span class="live" id="live" hidden>Live</span>
+        <button class="tool" type="button" id="help-toggle" title="Shortcuts (?)" aria-label="Shortcuts" aria-expanded="false" aria-controls="help">
+          <svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3M12 17h.01"/></svg>
         </button>
       </div>
-    </header>
-
-    <!-- Main Workspace Area -->
-    <div class="workspace">
-      <!-- Collapsible Sidebar -->
-      <aside class="sidebar" id="sidebar">
-        <div class="sidebar-header">
-          <span class="sidebar-heading">Navigation</span>
-          <span class="sidebar-count" id="artboard-count">0 artboards</span>
-        </div>
-        <div class="sidebar-tree" id="sidebar-tree">
-          <!-- Populated by explorer.js -->
-        </div>
-      </aside>
-
-      <!-- Infinite Canvas Viewport -->
-      <main class="canvas-viewport" id="canvas-viewport">
-        <!-- Interactive Canvas Stage -->
-        <div class="canvas-stage" id="canvas-stage">
-          <!-- Background Grid layer -->
-          <div class="canvas-grid" id="canvas-grid"></div>
 
-          <!-- Dynamic Artboard Content Container -->
-          <div class="canvas-content" id="canvas-content">
-            <!-- Sections & Artboards rendered dynamically -->
-          </div>
-        </div>
+      <section class="help" id="help" aria-label="Shortcuts" hidden>
+        <h2>Shortcuts</h2>
+        <dl>
+          <div><dt>Drag, <kbd>Space</kbd> + drag</dt><dd>Move around</dd></div>
+          <div><dt>Scroll (<kbd>Shift</kbd>: sideways)</dt><dd>Move around</dd></div>
+          <div><dt><kbd>Ctrl</kbd>/<kbd>⌘</kbd> + scroll, pinch</dt><dd>Zoom</dd></div>
+          <div><dt><kbd>+</kbd> <kbd>−</kbd></dt><dd>Zoom in, out</dd></div>
+          <div><dt><kbd>Shift</kbd> + <kbd>0</kbd></dt><dd>Zoom to 100%</dd></div>
+          <div><dt><kbd>Shift</kbd> + <kbd>1</kbd></dt><dd>Fit everything</dd></div>
+          <div><dt><kbd>Shift</kbd> + <kbd>2</kbd>, double-click</dt><dd>Fit the design</dd></div>
+          <div><dt><kbd>←</kbd> <kbd>→</kbd></dt><dd>Previous, next design</dd></div>
+          <div><dt><kbd>Enter</kbd></dt><dd>Open the design on its own</dd></div>
+          <div><dt><kbd>/</kbd></dt><dd>Search</dd></div>
+          <div><dt><kbd>1</kbd> – <kbd>4</kbd></dt><dd>All, mobile, tablet, desktop</dd></div>
+          <div><dt><kbd>R</kbd></dt><dd>Reload the designs</dd></div>
+          <div><dt><kbd>\</kbd></dt><dd>Show or hide the list</dd></div>
+          <div><dt><kbd>Esc</kbd></dt><dd>Deselect</dd></div>
+        </dl>
+      </section>
 
-        <!-- Pan overlay capturing mouse when Space or dragging is active -->
-        <div class="pointer-shield" id="pointer-shield"></div>
-
-        <!-- Canvas Mini HUD Overlay -->
-        <div class="canvas-hud">
-          <span id="hud-coordinates">X: 0 Y: 0</span>
-          <span class="hud-sep">•</span>
-          <span>Hold <kbd>Space</kbd> + Drag to pan</span>
-          <span class="hud-sep">•</span>
-          <span><kbd>Scroll</kbd> to zoom</span>
-        </div>
-      </main>
-    </div>
-
-    <!-- Keyboard Shortcuts Modal -->
-    <div class="modal-backdrop" id="shortcuts-modal">
-      <div class="modal-card">
-        <div class="modal-header">
-          <h2>Keyboard Shortcuts</h2>
-          <button id="btn-close-modal" class="btn-icon">
-            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-              <line x1="18" y1="6" x2="6" y2="18"/>
-              <line x1="6" y1="6" x2="18" y2="18"/>
-            </svg>
-          </button>
-        </div>
-        <div class="shortcuts-grid">
-          <div class="shortcut-item">
-            <span class="shortcut-desc">Pan Canvas</span>
-            <div class="shortcut-keys"><kbd>Space</kbd> + <kbd>Drag</kbd></div>
-          </div>
-          <div class="shortcut-item">
-            <span class="shortcut-desc">Zoom In / Out</span>
-            <div class="shortcut-keys"><kbd>+</kbd> / <kbd>-</kbd> or <kbd>Ctrl</kbd> + <kbd>Wheel</kbd></div>
-          </div>
-          <div class="shortcut-item">
-            <span class="shortcut-desc">Reset Zoom (100%)</span>
-            <div class="shortcut-keys"><kbd>0</kbd></div>
-          </div>
-          <div class="shortcut-item">
-            <span class="shortcut-desc">Fit All Artboards</span>
-            <div class="shortcut-keys"><kbd>F</kbd> or <kbd>Shift</kbd> + <kbd>1</kbd></div>
-          </div>
-          <div class="shortcut-item">
-            <span class="shortcut-desc">Search Artboards</span>
-            <div class="shortcut-keys"><kbd>/</kbd> or <kbd>⌘</kbd> + <kbd>K</kbd></div>
-          </div>
-          <div class="shortcut-item">
-            <span class="shortcut-desc">Toggle Sidebar</span>
-            <div class="shortcut-keys"><kbd>[</kbd> or <kbd>]</kbd></div>
-          </div>
-          <div class="shortcut-item">
-            <span class="shortcut-desc">Device Filters</span>
-            <div class="shortcut-keys"><kbd>1</kbd> - <kbd>5</kbd></div>
-          </div>
-          <div class="shortcut-item">
-            <span class="shortcut-desc">Show / Hide Help</span>
-            <div class="shortcut-keys"><kbd>?</kbd></div>
-          </div>
-        </div>
+      <div class="toast" id="toast" role="status" aria-live="polite"></div>
+      <div class="notice" id="notice" hidden>
+        <img class="notice-mark" src="/__explorer/mark.svg" alt="" height="72">
+        <strong id="notice-title"></strong>
+        <p id="notice-text"></p>
       </div>
-    </div>
+    </main>
   </div>
-
-  <script type="module" src="/__explorer/explorer.js"></script>
 </body>
 </html>

package/src/client/logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 110.11 18" width="110.11" height="18" role="img" aria-label="htmlboard"><title>htmlboard</title><svg x="0" y="0" width="22.8" height="18" viewBox="1.75 5.25 28.5 22.5"><rect x="2" y="7.4" width="28" height="1.2" rx="0.6" fill="#9D9DA3"/><rect x="4.5" y="10.5" width="9" height="17" rx="1.6" fill="#FFFFFF"/><rect x="16" y="10.5" width="12" height="8.5" rx="1.6" fill="#FFFFFF"/><rect x="8.1" y="5.5" width="1.8" height="6.5" rx="0.9" fill="#3D9DFF"/><rect x="21.1" y="5.5" width="1.8" height="6.5" rx="0.9" fill="#3D9DFF"/></svg><g transform="translate(28.2 14.94)"><path d="M0.86 0V-5.21V-11.88H3.55V-9.36Q3.55 -9.02 3.52 -8.57Q3.49 -8.12 3.42 -7.63Q3.36 -7.14 3.29 -6.67Q3.23 -6.2 3.16 -5.82H3.45Q3.65 -6.87 4.01 -7.59Q4.37 -8.31 4.96 -8.68Q5.56 -9.05 6.45 -9.05Q7.96 -9.05 8.69 -7.99Q9.43 -6.93 9.43 -4.75V0H6.72V-4.45Q6.72 -5.63 6.39 -6.2Q6.06 -6.77 5.36 -6.77Q4.78 -6.77 4.38 -6.39Q3.98 -6.01 3.77 -5.3Q3.55 -4.59 3.55 -3.58V0Z" fill="#9D9DA3"/><path d="M14.39 0.21Q12.82 0.21 12.08 -0.6Q11.34 -1.41 11.34 -3.17V-6.71H10.2L10.23 -8.65H10.78Q11.53 -8.7 11.87 -9.02Q12.2 -9.34 12.29 -10.06L12.42 -10.8H13.96V-8.82H16.05V-6.64H13.96V-3.34Q13.96 -2.75 14.25 -2.48Q14.54 -2.21 15.06 -2.21Q15.35 -2.21 15.62 -2.28Q15.89 -2.35 16.08 -2.46V-0.03Q15.56 0.13 15.13 0.17Q14.71 0.21 14.39 0.21Z" fill="#9D9DA3"/><path d="M17.32 0V-5.36V-8.82H19.51L19.53 -5.81H19.78Q19.97 -6.95 20.33 -7.66Q20.7 -8.38 21.26 -8.71Q21.82 -9.05 22.59 -9.05Q23.38 -9.05 23.9 -8.69Q24.41 -8.33 24.69 -7.61Q24.97 -6.9 25.02 -5.81H25.24Q25.44 -6.97 25.85 -7.68Q26.26 -8.39 26.86 -8.72Q27.46 -9.05 28.21 -9.05Q28.94 -9.05 29.47 -8.78Q30.01 -8.5 30.37 -7.96Q30.73 -7.41 30.9 -6.59Q31.08 -5.77 31.08 -4.69V0H28.38V-4.39Q28.38 -5.17 28.25 -5.69Q28.12 -6.21 27.86 -6.47Q27.59 -6.73 27.17 -6.73Q26.68 -6.73 26.31 -6.36Q25.94 -5.99 25.72 -5.3Q25.51 -4.61 25.51 -3.65V0H22.87V-4.39Q22.87 -5.19 22.74 -5.7Q22.6 -6.21 22.33 -6.47Q22.05 -6.73 21.64 -6.73Q21.16 -6.73 20.8 -6.38Q20.43 -6.03 20.23 -5.34Q20.02 -4.65 20.02 -3.65V0Z" fill="#9D9DA3"/><path d="M32.59 0V-11.88H35.25V0Z" fill="#9D9DA3"/><path d="M42.33 0.23Q41.53 0.23 40.93 -0.09Q40.33 -0.42 39.95 -1.06Q39.56 -1.71 39.41 -2.66H39.17L39.14 0H36.88V-3.82V-11.88H39.57V-9.1Q39.57 -8.68 39.52 -8.2Q39.47 -7.73 39.39 -7.22Q39.3 -6.7 39.19 -6.15H39.49Q39.68 -7.13 40.07 -7.77Q40.45 -8.41 41.04 -8.72Q41.63 -9.03 42.4 -9.03Q43.46 -9.03 44.23 -8.49Q45 -7.95 45.43 -6.93Q45.86 -5.9 45.86 -4.42Q45.86 -2.92 45.42 -1.89Q44.98 -0.85 44.18 -0.31Q43.39 0.23 42.33 0.23ZM41.35 -1.93Q41.88 -1.93 42.27 -2.25Q42.66 -2.56 42.87 -3.11Q43.08 -3.67 43.08 -4.38Q43.08 -5.09 42.88 -5.65Q42.68 -6.2 42.31 -6.52Q41.94 -6.84 41.39 -6.84Q41.08 -6.84 40.8 -6.73Q40.52 -6.62 40.3 -6.41Q40.07 -6.2 39.91 -5.92Q39.74 -5.63 39.65 -5.28Q39.56 -4.92 39.56 -4.53V-4.28Q39.56 -3.81 39.68 -3.39Q39.8 -2.97 40.02 -2.64Q40.25 -2.31 40.59 -2.12Q40.92 -1.93 41.35 -1.93Z" fill="#FFFFFF"/><path d="M51.18 0.23Q49.86 0.23 48.85 -0.28Q47.84 -0.79 47.27 -1.83Q46.7 -2.86 46.7 -4.41Q46.7 -5.99 47.28 -7.02Q47.86 -8.05 48.88 -8.55Q49.9 -9.05 51.2 -9.05Q52.53 -9.05 53.54 -8.54Q54.55 -8.02 55.12 -7Q55.68 -5.97 55.68 -4.41Q55.68 -2.81 55.09 -1.78Q54.5 -0.74 53.48 -0.26Q52.46 0.23 51.18 0.23ZM51.25 -1.73Q51.82 -1.73 52.2 -2.02Q52.58 -2.3 52.77 -2.87Q52.96 -3.44 52.96 -4.25Q52.96 -5.13 52.75 -5.73Q52.54 -6.33 52.14 -6.65Q51.74 -6.98 51.12 -6.98Q50.58 -6.98 50.19 -6.69Q49.81 -6.41 49.61 -5.84Q49.42 -5.27 49.42 -4.44Q49.42 -3.12 49.9 -2.43Q50.38 -1.73 51.25 -1.73Z" fill="#FFFFFF"/><path d="M59.04 0.23Q58.33 0.23 57.75 -0.03Q57.16 -0.3 56.82 -0.85Q56.47 -1.39 56.47 -2.23Q56.47 -3.01 56.78 -3.51Q57.08 -4.01 57.63 -4.31Q58.18 -4.61 58.9 -4.78Q59.63 -4.96 60.46 -5.1Q61.11 -5.22 61.48 -5.3Q61.86 -5.39 62.02 -5.54Q62.18 -5.69 62.18 -5.98Q62.18 -6.42 61.86 -6.7Q61.53 -6.98 60.9 -6.98Q60.48 -6.98 60.1 -6.83Q59.72 -6.67 59.47 -6.35Q59.22 -6.02 59.15 -5.49L56.76 -5.97Q56.88 -6.82 57.26 -7.41Q57.63 -8 58.21 -8.36Q58.78 -8.73 59.49 -8.89Q60.21 -9.05 60.98 -9.05Q62.31 -9.05 63.16 -8.6Q64 -8.14 64.41 -7.23Q64.82 -6.33 64.82 -4.96V-3.51Q64.82 -2.93 64.84 -2.35Q64.85 -1.76 64.87 -1.17Q64.9 -0.59 64.94 0H62.58Q62.54 -0.48 62.5 -1.05Q62.47 -1.62 62.45 -2.24H62.21Q62.05 -1.55 61.62 -0.99Q61.18 -0.42 60.52 -0.09Q59.87 0.23 59.04 0.23ZM60.21 -1.7Q60.5 -1.7 60.82 -1.81Q61.14 -1.92 61.42 -2.13Q61.71 -2.35 61.92 -2.7Q62.14 -3.04 62.21 -3.51L62.19 -4.45L62.59 -4.42Q62.35 -4.22 62 -4.09Q61.64 -3.97 61.26 -3.9Q60.87 -3.83 60.48 -3.75Q60.1 -3.68 59.79 -3.56Q59.48 -3.44 59.3 -3.23Q59.11 -3.03 59.11 -2.67Q59.11 -2.22 59.43 -1.96Q59.74 -1.7 60.21 -1.7Z" fill="#FFFFFF"/><path d="M66.33 0V-4.38V-8.82H68.59L68.62 -5.62H68.87Q68.98 -6.88 69.29 -7.62Q69.61 -8.36 70.14 -8.69Q70.68 -9.02 71.44 -9.02Q71.65 -9.02 71.88 -8.98Q72.11 -8.94 72.37 -8.84L72.25 -5.92Q71.94 -6.08 71.62 -6.15Q71.29 -6.22 71.02 -6.22Q70.42 -6.22 69.99 -5.95Q69.56 -5.68 69.32 -5.13Q69.08 -4.59 69.03 -3.79V0Z" fill="#FFFFFF"/><path d="M76.48 0.23Q75.44 0.23 74.64 -0.31Q73.83 -0.85 73.38 -1.9Q72.92 -2.94 72.92 -4.46Q72.92 -5.88 73.32 -6.9Q73.72 -7.92 74.49 -8.48Q75.26 -9.03 76.36 -9.03Q77.17 -9.03 77.75 -8.72Q78.33 -8.42 78.72 -7.78Q79.1 -7.14 79.3 -6.15H79.6Q79.5 -6.71 79.41 -7.24Q79.31 -7.77 79.26 -8.24Q79.21 -8.72 79.21 -9.1V-11.88H81.91V-3.81V0H79.65L79.63 -2.66H79.37Q79.18 -1.67 78.8 -1.03Q78.41 -0.39 77.83 -0.08Q77.26 0.23 76.48 0.23ZM77.44 -1.93Q77.87 -1.93 78.21 -2.12Q78.54 -2.31 78.76 -2.64Q78.99 -2.97 79.11 -3.39Q79.22 -3.81 79.22 -4.28V-4.53Q79.22 -4.92 79.13 -5.27Q79.04 -5.62 78.88 -5.91Q78.72 -6.2 78.49 -6.41Q78.26 -6.62 77.98 -6.73Q77.7 -6.84 77.39 -6.84Q76.86 -6.84 76.48 -6.52Q76.11 -6.2 75.91 -5.65Q75.72 -5.09 75.72 -4.38Q75.72 -3.67 75.92 -3.12Q76.13 -2.56 76.52 -2.25Q76.91 -1.93 77.44 -1.93Z" fill="#FFFFFF"/></g></svg>

package/src/client/mark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="1.75 5.25 28.5 22.5" width="91.2" height="72" role="img" aria-label="htmlboard"><title>htmlboard</title><rect x="2" y="7.4" width="28" height="1.2" rx="0.6" fill="#9D9DA3"/><rect x="4.5" y="10.5" width="9" height="17" rx="1.6" fill="#FFFFFF"/><rect x="16" y="10.5" width="12" height="8.5" rx="1.6" fill="#FFFFFF"/><rect x="8.1" y="5.5" width="1.8" height="6.5" rx="0.9" fill="#3D9DFF"/><rect x="21.1" y="5.5" width="1.8" height="6.5" rx="0.9" fill="#3D9DFF"/></svg>