finish messaging ui

static/dist/index.html

@@ -1,6 +1,6 @@
 <html lang="en">
   <head>
-    <title>My App</title>
+    <title>UDN Server</title>
 
     <meta charset="UTF-8" />
     <meta

static/dist/index.js

@@ -1,5 +1,63 @@
 (() => {
-  // node_modules/bloatless-react/index.ts
+  // ../../bloatless-react/node_modules/uuid/dist/esm-browser/stringify.js
+  var byteToHex = [];
+  for (i = 0; i < 256; ++i) {
+    byteToHex.push((i + 256).toString(16).slice(1));
+  }
+  var i;
+  function unsafeStringify(arr, offset = 0) {
+    return (byteToHex[arr[offset + 0]] + byteToHex[arr[offset + 1]] + byteToHex[arr[offset + 2]] + byteToHex[arr[offset + 3]] + "-" + byteToHex[arr[offset + 4]] + byteToHex[arr[offset + 5]] + "-" + byteToHex[arr[offset + 6]] + byteToHex[arr[offset + 7]] + "-" + byteToHex[arr[offset + 8]] + byteToHex[arr[offset + 9]] + "-" + byteToHex[arr[offset + 10]] + byteToHex[arr[offset + 11]] + byteToHex[arr[offset + 12]] + byteToHex[arr[offset + 13]] + byteToHex[arr[offset + 14]] + byteToHex[arr[offset + 15]]).toLowerCase();
+  }
+
+  // ../../bloatless-react/node_modules/uuid/dist/esm-browser/rng.js
+  var getRandomValues;
+  var rnds8 = new Uint8Array(16);
+  function rng() {
+    if (!getRandomValues) {
+      getRandomValues = typeof crypto !== "undefined" && crypto.getRandomValues && crypto.getRandomValues.bind(crypto);
+      if (!getRandomValues) {
+        throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported");
+      }
+    }
+    return getRandomValues(rnds8);
+  }
+
+  // ../../bloatless-react/node_modules/uuid/dist/esm-browser/native.js
+  var randomUUID = typeof crypto !== "undefined" && crypto.randomUUID && crypto.randomUUID.bind(crypto);
+  var native_default = {
+    randomUUID
+  };
+
+  // ../../bloatless-react/node_modules/uuid/dist/esm-browser/v4.js
+  function v4(options, buf, offset) {
+    if (native_default.randomUUID && !buf && !options) {
+      return native_default.randomUUID();
+    }
+    options = options || {};
+    var rnds = options.random || (options.rng || rng)();
+    rnds[6] = rnds[6] & 15 | 64;
+    rnds[8] = rnds[8] & 63 | 128;
+    if (buf) {
+      offset = offset || 0;
+      for (var i = 0; i < 16; ++i) {
+        buf[offset + i] = rnds[i];
+      }
+      return buf;
+    }
+    return unsafeStringify(rnds);
+  }
+  var v4_default = v4;
+
+  // ../../bloatless-react/index.ts
+  var UUID = class {
+    value;
+    constructor() {
+      this.value = v4_default();
+    }
+    toString() {
+      return this.value;
+    }
+  };
   var State = class {
     _value;
     _bindings = /* @__PURE__ */ new Set();
@@ -22,6 +80,41 @@
       fn(this._value);
     }
   };
+  var ListState = class extends State {
+    additionHandlers = /* @__PURE__ */ new Set();
+    removalHandlers = /* @__PURE__ */ new Map();
+    constructor() {
+      super(/* @__PURE__ */ new Set());
+    }
+    add(...items) {
+      items.forEach((item) => {
+        this.value.add(item);
+        this.additionHandlers.forEach((handler) => handler(item));
+      });
+    }
+    remove(...items) {
+      items.forEach((item) => {
+        this.value.delete(item);
+        const uuid = item.uuid;
+        if (!this.removalHandlers.has(uuid)) return;
+        this.removalHandlers.get(uuid)(item);
+        this.removalHandlers.delete(uuid);
+      });
+    }
+    handleAddition(handler) {
+      this.additionHandlers.add(handler);
+    }
+    handleRemoval(item, handler) {
+      this.removalHandlers.set(item.uuid, handler);
+    }
+  };
+  function createProxyState(statesToSubscibe, fn) {
+    const proxyState = new State(fn());
+    statesToSubscibe.forEach(
+      (state) => state.subscribe(() => proxyState.value = fn())
+    );
+    return proxyState;
+  }
   function createElement(tagName, attributes = {}, ...children) {
     const element = document.createElement(tagName);
     if (attributes != null)
@@ -30,7 +123,18 @@
         const [directiveKey, directiveValue] = attributename.split(":");
         switch (directiveKey) {
           case "on": {
-            element.addEventListener(directiveValue, value);
+            switch (directiveValue) {
+              case "enter": {
+                element.addEventListener("keydown", (e) => {
+                  if (e.key != "Enter") return;
+                  value();
+                });
+                break;
+              }
+              default: {
+                element.addEventListener(directiveValue, value);
+              }
+            }
             break;
           }
           case "subscribe": {
@@ -78,38 +182,176 @@
     return element;
   }
 
-  // src/index.tsx
+  // src/translations.tsx
+  var staticTextEnglish = {
+    channel: "Channel",
+    channel_placeholder: "my-channel",
+    message: "Message",
+    message_placeholder: "Hello, world!",
+    message_placeholder_generic: "Type a message...",
+    noMessagesReceived: "No messages received",
+    messages: "Messages",
+    messageLastReceived: "Last received message",
+    messagesReceived: "Received Messages",
+    send: "Send",
+    settings: "Settings",
+    subscribeToChannel: "Subscribe to channel",
+    subscribe: "Subscribe",
+    unsubscribe: "Unubscribe"
+  };
+  var translations = {
+    en: staticTextEnglish,
+    es: {
+      channel: "Canal",
+      channel_placeholder: "mi-canal",
+      message: "Mensaje",
+      message_placeholder: "Hola!",
+      message_placeholder_generic: "Escribe un mensaje...",
+      noMessagesReceived: "Sin mensajes",
+      messages: "Mensajes",
+      messageLastReceived: "\xDCltimo mensaje",
+      messagesReceived: "Todos los Mensajes",
+      send: "Enviar",
+      settings: "Configuraci\xF3n",
+      subscribeToChannel: "Suscribirse a un canal",
+      subscribe: "Suscribirse",
+      unsubscribe: "Cancelar"
+    }
+  };
+  function getText(key) {
+    if (translations[navigator.language] && translations[navigator.language][key]) {
+      return translations[navigator.language.substring(0, 2)][key];
+    }
+    return translations.en[key];
+  }
+
+  // src/model.tsx
+  var Message = class {
+    constructor(channel, body) {
+      this.channel = channel;
+      this.body = body;
+    }
+    uuid = new UUID();
+  };
   var ws = new WebSocket(`ws://${window.location.host}`);
   ws.addEventListener("message", (message) => {
-    receivedMessage.value = message.data;
+    const formatted = formatMessage(message);
+    const { channel, body } = parseMessage(message);
+    if (formatted) {
+      lastReceivedMessage.value = formatted;
+    }
+    if (channel && body) {
+      const messageObject = new Message(channel, body);
+      if (body) messages.add(messageObject);
+    }
   });
-  function send(object) {
+  var messages = new ListState();
+  var lastReceivedMessage = new State(
+    getText("noMessagesReceived")
+  );
+  var subscriptionChannel = new State("");
+  var newMessageChannel = new State("");
+  var newMessageBody = new State("");
+  var isMessageEmpty = createProxyState(
+    [newMessageChannel, newMessageBody],
+    () => newMessageChannel.value == "" || newMessageBody.value == ""
+  );
+  function formatMessage(message) {
+    const object = parseMessage(message);
+    const lines = Object.entries(object).map(
+      (entry) => `${entry[0]}: ${entry[1]}`
+    );
+    return lines.join("\n");
+  }
+  function parseMessage(message) {
+    return JSON.parse(message.data.toString());
+  }
+  function sendToWS(object) {
     const stringified = JSON.stringify(object);
     ws.send(stringified);
   }
-  var receivedMessage = new State("");
-  var subscriptionChannel = new State("");
-  var messageChannel = new State("");
-  var messageBody = new State("");
   function subscribe() {
-    send({ subscribeChannel: subscriptionChannel.value });
+    sendToWS({ subscribeChannel: subscriptionChannel.value });
   }
   function unsubscribe() {
-    send({ unsubscribeChannel: subscriptionChannel.value });
+    sendToWS({ unsubscribeChannel: subscriptionChannel.value });
   }
   function sendMessage() {
-    send({
-      messageChannel: messageChannel.value,
-      messageBody: messageBody.value
+    sendToWS({
+      messageChannel: newMessageChannel.value,
+      messageBody: newMessageBody.value
     });
+    newMessageBody.value = "";
   }
-  document.querySelector("main").append(
-    /* @__PURE__ */ createElement("article", null, /* @__PURE__ */ createElement("header", null, "UDN Test"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("div", { class: "tile" }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("b", null, "Received message"), /* @__PURE__ */ createElement("p", { class: "secondary", "subscribe:innerText": receivedMessage }))), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("label", { class: "tile" }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, "Subscribe to channel"), /* @__PURE__ */ createElement(
+
+  // src/mainScreen.tsx
+  function MainScreen() {
+    return /* @__PURE__ */ createElement("article", { id: "main-screen" }, /* @__PURE__ */ createElement("header", null, getText("settings")), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("div", { class: "tile width-input" }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("b", null, getText("messageLastReceived")), /* @__PURE__ */ createElement("p", { class: "secondary", "subscribe:innerText": lastReceivedMessage }))), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("label", { class: "tile" }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, getText("subscribeToChannel")), /* @__PURE__ */ createElement(
       "input",
       {
-        placeholder: "my-channel",
-        "bind:value": subscriptionChannel
+        placeholder: getText("channel_placeholder"),
+        "bind:value": subscriptionChannel,
+        "on:enter": subscribe
       }
-    ))), /* @__PURE__ */ createElement("div", { class: "flex-row width-input justify-end" }, /* @__PURE__ */ createElement("button", { class: "danger width-50", "on:click": unsubscribe }, "Unsubscribe"), /* @__PURE__ */ createElement("button", { class: "primary width-50", "on:click": subscribe }, "Subscribe", /* @__PURE__ */ createElement("span", { class: "icon" }, "arrow_forward"))), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("label", { class: "tile" }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, "Channel"), /* @__PURE__ */ createElement("input", { placeholder: "my-channel", "bind:value": messageChannel }))), /* @__PURE__ */ createElement("label", { class: "tile" }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, "Message"), /* @__PURE__ */ createElement("input", { placeholder: "Hello, world!", "bind:value": messageBody }))), /* @__PURE__ */ createElement("div", { class: "flex-row width-input justify-end" }, /* @__PURE__ */ createElement("button", { class: "primary width-50", "on:click": sendMessage }, "Send", /* @__PURE__ */ createElement("span", { class: "icon" }, "arrow_forward")))))
+    ))), /* @__PURE__ */ createElement("div", { class: "flex-row width-input justify-end" }, /* @__PURE__ */ createElement("button", { class: "danger width-50", "on:click": unsubscribe }, getText("unsubscribe")), /* @__PURE__ */ createElement("button", { class: "primary width-50", "on:click": subscribe }, getText("subscribe"), /* @__PURE__ */ createElement("span", { class: "icon" }, "arrow_forward"))), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("label", { class: "tile" }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, getText("channel")), /* @__PURE__ */ createElement(
+      "input",
+      {
+        placeholder: getText("channel_placeholder"),
+        "bind:value": newMessageChannel,
+        "on:enter": sendMessage
+      }
+    ))), /* @__PURE__ */ createElement("label", { class: "tile" }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, getText("message")), /* @__PURE__ */ createElement(
+      "input",
+      {
+        placeholder: getText("message_placeholder"),
+        "bind:value": newMessageBody,
+        "on:enter": sendMessage
+      }
+    ))), /* @__PURE__ */ createElement("div", { class: "flex-row width-input justify-end" }, /* @__PURE__ */ createElement(
+      "button",
+      {
+        class: "primary width-50",
+        "on:click": sendMessage,
+        "toggle:disabled": isMessageEmpty
+      },
+      getText("send"),
+      /* @__PURE__ */ createElement("span", { class: "icon" }, "arrow_forward")
+    ))));
+  }
+
+  // src/messageScreen.tsx
+  var convertMessageToElement = (message) => {
+    return /* @__PURE__ */ createElement("div", { class: "tile", style: "flex: 0" }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", { class: "secondary" }, message.channel), /* @__PURE__ */ createElement("b", null, message.body)));
+  };
+  function MessageScreen() {
+    return /* @__PURE__ */ createElement("article", { id: "message-screen" }, /* @__PURE__ */ createElement("header", null, getText("messagesReceived")), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement(
+      "div",
+      {
+        class: "flex-column gap",
+        "subscribe:children": [messages, convertMessageToElement]
+      }
+    )), /* @__PURE__ */ createElement("footer", null, /* @__PURE__ */ createElement(
+      "input",
+      {
+        style: "max-width: unset",
+        placeholder: getText("message_placeholder_generic"),
+        "bind:value": newMessageBody,
+        "on:enter": sendMessage
+      }
+    ), /* @__PURE__ */ createElement(
+      "button",
+      {
+        class: "primary",
+        "on:click": sendMessage,
+        "toggle:disabled": isMessageEmpty
+      },
+      /* @__PURE__ */ createElement("span", { class: "icon" }, "send")
+    )));
+  }
+
+  // src/index.tsx
+  document.body.prepend(
+    /* @__PURE__ */ createElement("menu", null, /* @__PURE__ */ createElement("a", { class: "tab-link", href: "#main-screen", active: true }, /* @__PURE__ */ createElement("span", { class: "icon" }, "settings"), getText("settings")), /* @__PURE__ */ createElement("a", { class: "tab-link", href: "#message-screen" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "chat"), getText("messages")))
   );
+  document.querySelector("main").append(MainScreen(), MessageScreen());
 })();

static/dist/styles.css

@@ -85,30 +85,29 @@ COLORS
   }
 }
 
-/* implementation */
+/* basic */
 html {
   background-color: var(--background);
   color: var(--text-normal);
 }
 
-menu,
-aside {
-  background-color: var(--backdrop);
-}
-
-header {
-  background-color: var(--layer);
-}
-
 .modal > div {
   background-color: var(--background);
 }
 
-* {
-  color: inherit;
+menu,
+header {
+  background-color: var(--background-transparent);
 }
 
+* {
+  color: inherit;
+  accent-color: var(--primary);
+}
+
+/* controls */
 button,
+footer,
 input,
 textarea,
 select,
@@ -138,10 +137,7 @@ input:checked {
   background-color: var(--primary);
 }
 
-button.ghost:not(.tile) {
-  background-color: transparent;
-}
-
+/* primary button */
 button.primary {
   background-color: var(--primary);
   color: var(--text-on-color);
@@ -155,6 +151,10 @@ button.primary:active {
   background-color: var(--primary-active);
 }
 
+/* ghost button */
+button.ghost:not(.tile) {
+  background-color: transparent;
+}
 button.ghost {
   color: var(--link);
 }
@@ -170,6 +170,7 @@ button.ghost:active {
   background-color: var(--background-active);
 }
 
+/* danger button */
 button.danger {
   background-color: var(--danger);
   color: var(--text-on-color);
@@ -188,14 +189,14 @@ SIZES
  */
 :root {
   /* gap */
-  --grid-gap: 4px;
-  --label-gap: 0.25rem;
-  --label-tile-gap: 0.5rem;
-  --link-gap: 1rem;
-  --control-gap: 1.2rem;
+  --gap-between-tiles: 4px;
+  --gap-in-tab-links: 1rem;
+  --gap-in-controls: 1.2rem;
 
   /* margin */
-  --label-margin: 1rem;
+  --label-top-padding: 0.25rem;
+  --label-tile-top-padding: 0.5rem;
+  --label-margin-bottom: 1rem;
   --content-margin: 0.75rem;
 
   /* padding */
@@ -203,13 +204,14 @@ SIZES
   --control-marker-padding: 0.7rem;
   --content-padding: 1rem;
   --modal-padding: 1.25rem;
-  --link-padding-h: 0.8rem;
+  --horizontal-tab-link-padding: 0.8rem;
 
   /* size */
   --checkbox-size: 16px;
 
-  --menu-width: 200px;
-  --split-pane-width: 300px;
+  --menu-height-mobile: calc(var(--header-height) + var(--safe-area-bottom));
+  --menu-width-desktop: 200px;
+  --split-pane-width-desktop: 300px;
 
   --control-height: 42px;
   --header-height: 48px;
@@ -225,42 +227,8 @@ SIZES
 }
 
 /*
-TEXT
- */
-* {
-  font-family: IBM Plex Sans;
-  font-size: 1rem;
-}
-
-h1 {
-  font-size: 2rem;
-}
-
-h2 {
-  font-size: 1.6rem;
-}
-
-h3 {
-  font-size: 1.4rem;
-}
-
-code {
-  font-family: IBM Plex Mono;
-}
-
-.secondary,
-.helper-text,
-.error-text,
-label {
-  font-size: 0.9rem;
-}
-
-label span,
-.helper-text,
-.secondary,
-.tab-link:not([active]) {
-  opacity: 0.6;
-}
+TYPE
+*/
 
 @font-face {
   font-family: IBM Plex Sans;
@@ -303,10 +271,8 @@ textarea {
   border: none;
 }
 
-@media (min-width: 640px) {
-  .modal > div {
-    border: 1px solid var(--surface-border);
-  }
+footer {
+  border-top: 1px solid var(--surface-border);
 }
 
 input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not(
@@ -322,10 +288,6 @@ hr {
   border-bottom: 1px solid var(--border);
 }
 
-menu {
-  border-right: 1px solid var(--border);
-}
-
 input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus:not(
     label.tile *
   ),
@@ -333,7 +295,7 @@ label.tile:has(input:focus),
 label.tile:has(textarea:focus),
 textarea:focus:not(label.tile *),
 [selected] {
-  outline: var(--grid-gap) solid var(--primary);
+  outline: var(--gap-between-tiles) solid var(--primary);
 }
 
 /* border-radius */
@@ -357,13 +319,14 @@ a,
 }
 
 button:not(.tile),
+footer,
 input,
 header,
 label.inline,
 .modal,
 select,
 textarea,
-.align-right,
+.align-center,
 .tile:not(label) {
   align-items: center;
 }
@@ -377,12 +340,12 @@ label * {
   display: block;
 }
 
+footer,
 header,
 input[type="checkbox"],
 input[type="radio"],
 label.inline,
 main,
-menu,
 .flex-column,
 .flex-row,
 .modal[open],
@@ -415,7 +378,6 @@ main,
   flex: 1;
 }
 
-menu,
 .flex-column,
 .modal > div,
 .tile > div {
@@ -424,11 +386,11 @@ menu,
 
 button,
 .tile {
-  gap: var(--control-gap);
+  gap: var(--gap-in-controls);
 }
 
-.grid {
-  gap: var(--grid-gap);
+.gap {
+  gap: var(--gap-between-tiles);
 }
 
 header,
@@ -442,6 +404,7 @@ button,
   justify-content: start;
 }
 
+footer,
 header button,
 input[type="checkbox"],
 input[type="radio"],
@@ -459,6 +422,13 @@ input[type="radio"],
   opacity: 0.5;
 }
 
+label span,
+.helper-text,
+.secondary,
+.tab-link:not([active]) {
+  opacity: 0.6;
+}
+
 /* padding, margin, etc */
 h1,
 h2,
@@ -477,34 +447,29 @@ hr {
 }
 
 label:not(.tile) {
-  margin-bottom: var(--label-margin);
-}
-
-label:not(.tile) > span:first-child {
-  margin-bottom: var(--label-gap);
+  margin-bottom: var(--label-margin-bottom);
 }
 
 label.tile {
-  margin-bottom: var(--grid-gap);
+  margin-bottom: var(--gap-between-tiles);
 }
 
-label.tile > span:first-child {
-  margin-top: var(--label-tile-gap);
+label:not(.tile) span:first-child {
+  margin-top: var(--label-top-padding);
 }
 
-menu {
-  padding-top: 10px;
+label.tile span:first-child {
+  margin-top: var(--label-tile-top-padding);
 }
 
 input[type="color"],
 input[type="checkbox"],
-input[type="radio"],
-label.tile:has(> span.icon) * {
+input[type="radio"] {
   padding: 0px;
 }
 
 article > div {
-  padding: calc(var(--header-height) + 20px) var(--content-padding);
+  padding: var(--content-padding);
 }
 
 button:not(.tile):not(header *),
@@ -513,7 +478,6 @@ select {
   padding: 0px var(--control-padding);
 }
 
-menu h1,
 textarea,
 .tile:not(label) {
   padding: var(--control-padding);
@@ -523,8 +487,8 @@ textarea,
   padding: var(--modal-padding);
 }
 
-label.tile {
-  padding: var(--label-gap) 0px;
+article > div {
+  padding-top: calc(var(--header-height) + var(--content-margin));
 }
 
 header {
@@ -535,6 +499,12 @@ label.tile:has(> span.icon) {
   padding-left: var(--control-padding);
 }
 
+article > div {
+  padding-bottom: calc(
+    var(--menu-height-mobile) + var(--control-height) + var(--content-padding)
+  );
+}
+
 label {
   text-indent: var(--control-padding);
 }
@@ -549,41 +519,51 @@ label.tile:has(> span.icon) {
 }
 
 /* position etc */
-select + .icon {
-  bottom: 0px;
-}
-
 article > div,
+footer,
 header,
-select + .icon {
+select + .icon,
+.absolute {
   position: absolute;
 }
 
-.modal {
+.modal,
+.fixed {
   position: fixed;
 }
 
 article,
+main,
 input,
-label {
+label,
+.relative {
   position: relative;
 }
 
+.sticky {
+  position: sticky;
+}
+
 article > div,
 header,
-.modal {
+.modal,
+.top-0 {
   top: 0;
 }
 
 article > div,
+footer,
 header,
-.modal {
+.modal,
+.left-0 {
   left: 0px;
 }
 
 article > div,
+footer,
 header,
-.modal {
+.modal,
+.right-0 {
   right: 0px;
 }
 
@@ -591,8 +571,14 @@ select + .icon {
   right: var(--control-marker-padding);
 }
 
+footer {
+  bottom: var(--menu-height-mobile);
+}
+
 article > div,
-.modal {
+select + .icon,
+.modal,
+.bottom-0 {
   bottom: 0px;
 }
 
@@ -600,17 +586,13 @@ article > div,
 article,
 main,
 select + .icon,
+.modal > div,
 .modal main {
   height: 100%;
 }
 
-@media (max-width: 640px) {
-  .modal > div {
-    height: 100%;
-  }
-}
-
 button:not(.tile):not(header *),
+footer,
 input:not([type="checkbox"]):not([type="radio"]),
 select,
 select + .icon,
@@ -623,20 +605,6 @@ header button {
   height: var(--header-height);
 }
 
-p,
-.width-content,
-.modal > div {
-  max-width: var(--max-content-width);
-}
-
-input,
-label,
-select,
-textarea,
-.width-input {
-  max-width: var(--max-input-width);
-}
-
 article {
   min-width: 100%;
 }
@@ -647,6 +615,7 @@ article {
 
 article,
 input:not([type="checkbox"]):not([type="radio"]),
+footer,
 header,
 main,
 select,
@@ -664,22 +633,50 @@ header button {
   width: var(--header-height);
 }
 
-menu {
-  width: var(--menu-width);
-}
-
 input[type="checkbox"],
 input[type="radio"] {
   width: 16px;
   height: 16px;
 }
 
+/*
+text
+ */
+* {
+  font-family: IBM Plex Sans;
+  font-size: 1rem;
+}
+
+h1 {
+  font-size: 2rem;
+}
+
+h2 {
+  font-size: 1.6rem;
+}
+
+h3 {
+  font-size: 1.4rem;
+}
+
+code {
+  font-family: IBM Plex Mono;
+}
+
+.secondary,
+.helper-text,
+.error-text,
+label {
+  font-size: 0.9rem;
+}
+
 /* text-decoration */
 a {
   text-decoration: none;
 }
 
 /* z-index */
+footer,
 header,
 menu {
   z-index: 1;
@@ -736,22 +733,13 @@ LAYOUT
 body {
   display: flex;
   flex-direction: column-reverse;
-}
 
-body,
-.tab-link {
-  width: 100%;
-}
-
-body,
-body > * {
   margin: 0px;
+  width: 100%;
   height: 100%;
 }
 
 main {
-  height: 100%;
-
   padding-left: var(--safe-area-left);
   padding-right: var(--safe-area-right);
   padding-top: var(--safe-area-top);
@@ -759,16 +747,14 @@ main {
 
 menu {
   width: 100%;
-  height: calc(var(--header-height) + var(--safe-area-bottom));
+  height: var(--menu-height-mobile);
 
   position: absolute;
   bottom: 0px;
   left: 0px;
   right: 0px;
 
-  background-color: var(--background-transparent);
-  border-right: none;
-
+  display: flex;
   flex-direction: row;
   justify-content: space-around;
 
@@ -777,24 +763,27 @@ menu {
 }
 
 .tab-link {
+  width: 100%;
+  height: var(--header-height);
+
+  padding: var(--horizontal-tab-link-padding) var(--control-padding);
+
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 0px;
 
   font-size: 0.5rem;
+}
 
-  height: var(--header-height);
-  padding: var(--link-padding-h) var(--control-padding);
+article > div {
+  padding-bottom: calc(
+    var(--menu-height-mobile) + var(--header-height) + var(--content-padding)
+  );
 }
 
 /* overflow */
-body {
-  overflow: hidden;
-}
-
-menu,
-article > div {
+menu {
   overflow: auto;
 }
 
@@ -804,6 +793,10 @@ main {
   overflow: hidden;
 }
 
+article > div {
+  overflow: scroll;
+}
+
 main {
   overflow-x: scroll;
 }
@@ -823,17 +816,14 @@ main {
 
 /* desktop */
 @media (min-width: 640px) {
+  /* basic */
   .mobile-only {
     display: none;
   }
 
-  body {
-    flex-direction: row;
-  }
-
-  main.split {
-    display: grid;
-    grid-template-columns: var(--split-pane-width) 1fr;
+  /* border, outline, etc */
+  .modal > div {
+    border: 1px solid var(--surface-border);
   }
 
   menu,
@@ -841,10 +831,47 @@ main {
     border-right: 1px solid var(--border);
   }
 
+  /* size */
+  .modal > div {
+    height: auto;
+  }
+
+  p,
+  .width-content,
+  .modal > div {
+    max-width: var(--max-content-width);
+  }
+
+  input,
+  label,
+  select,
+  textarea,
+  .width-input {
+    max-width: var(--max-input-width);
+  }
+
+  /* layout */
+  body {
+    flex-direction: row;
+  }
+
+  main.split {
+    display: grid;
+    grid-template-columns: var(--split-pane-width-desktop) 1fr;
+  }
+
+  footer {
+    bottom: 0px;
+  }
+
+  article > div {
+    padding-bottom: calc(var(--content-padding) + var(--control-height));
+  }
+
   menu {
     position: static;
 
-    width: var(--menu-width);
+    width: var(--menu-width-desktop);
     height: 100%;
 
     flex-direction: column;
@@ -857,7 +884,7 @@ main {
     height: var(--control-height);
 
     flex-direction: row;
-    gap: var(--link-gap);
+    gap: var(--gap-in-tab-links);
 
     font-size: 1rem;
   }