add basic model and interface

dist/index.css

@@ -0,0 +1,24 @@
+/* src/styles.css */
+#settings-tab > div {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+}
+#settings-tab > div > div {
+  width: var(--max-input-width);
+  min-width: 100%;
+  max-width: 100%;
+  flex: 1;
+}
+article:not([connected]) .connected-only {
+  display: none;
+}
+article:not([connected]) .disconnected-only {
+  display: flex;
+}
+article[connected] .connected-only {
+  display: flex;
+}
+article[connected] .disconnected-only {
+  display: none;
+}

dist/index.html

@@ -21,6 +21,7 @@
     />
 
     <link rel="stylesheet" href="styles.css" />
+    <link rel="stylesheet" href="index.css" />
     <link rel="manifest" href="manifest.json" />
     <link rel="icon" href="icon.png" />
     <script src="support.js" defer></script>

dist/index.js

@@ -1,5 +1,159 @@
 (() => {
+  // 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();
+  }
+
+  // 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);
+  }
+
+  // node_modules/uuid/dist/esm-browser/native.js
+  var randomUUID = typeof crypto !== "undefined" && crypto.randomUUID && crypto.randomUUID.bind(crypto);
+  var native_default = {
+    randomUUID
+  };
+
+  // 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;
+
   // node_modules/bloatless-react/index.ts
+  function UUID() {
+    return v4_default();
+  }
+  var State = class {
+    _value;
+    _bindings = /* @__PURE__ */ new Set();
+    // init
+    constructor(initialValue) {
+      this._value = initialValue;
+    }
+    // value
+    get value() {
+      return this._value;
+    }
+    set value(newValue) {
+      if (this._value == newValue) return;
+      this._value = newValue;
+      this.callSubscriptions();
+    }
+    // subscriptions
+    callSubscriptions() {
+      this._bindings.forEach((fn) => fn(this._value));
+    }
+    subscribe(fn) {
+      this._bindings.add(fn);
+      fn(this._value);
+    }
+    // stringify
+    toString() {
+      return JSON.stringify(this._value);
+    }
+  };
+  var ListState = class extends State {
+    additionHandlers = /* @__PURE__ */ new Set();
+    removalHandlers = /* @__PURE__ */ new Map();
+    // init
+    constructor(initialItems) {
+      super(new Set(initialItems));
+    }
+    // list
+    add(...items) {
+      items.forEach((item) => {
+        this.value.add(item);
+        this.additionHandlers.forEach((handler) => handler(item));
+      });
+      this.callSubscriptions();
+    }
+    remove(...items) {
+      items.forEach((item) => {
+        this.value.delete(item);
+        const id = item.id;
+        if (!this.removalHandlers.has(id)) return;
+        this.removalHandlers.get(id)(item);
+        this.removalHandlers.delete(id);
+      });
+      this.callSubscriptions();
+    }
+    // handlers
+    handleAddition(handler) {
+      this.additionHandlers.add(handler);
+      [...this.value.values()].forEach(handler);
+    }
+    handleRemoval(item, handler) {
+      this.removalHandlers.set(item.id, handler);
+    }
+    // stringification
+    toString() {
+      const array = [...this.value];
+      const json = JSON.stringify(array);
+      return json;
+    }
+  };
+  function createProxyState(statesToSubscibe, fn) {
+    const proxyState = new State(fn());
+    statesToSubscibe.forEach(
+      (state) => state.subscribe(() => proxyState.value = fn())
+    );
+    return proxyState;
+  }
+  function persistState(localStorageKey, state) {
+    state.subscribe(() => {
+      const stringifiedValue = state.toString();
+      localStorage.setItem(localStorageKey, stringifiedValue);
+    });
+  }
+  function restoreState(localStorageKey, initialStateValue) {
+    const storedString = localStorage.getItem(localStorageKey) ?? JSON.stringify(initialStateValue);
+    const convertedValue = JSON.parse(storedString);
+    const state = new State(convertedValue);
+    persistState(localStorageKey, state);
+    return state;
+  }
+  function restoreListState(localStorageKey) {
+    const storedString = localStorage.getItem(localStorageKey) ?? "";
+    let initialItems = [];
+    try {
+      const array = JSON.parse(storedString);
+      if (!Array.isArray(array)) throw "";
+      initialItems = array;
+    } catch {
+    }
+    const state = new ListState(initialItems);
+    persistState(localStorageKey, state);
+    return state;
+  }
   function createElement(tagName, attributes = {}, ...children) {
     const element = document.createElement(tagName);
     if (attributes != null)
@@ -78,37 +232,391 @@
     return element;
   }
 
+  // node_modules/udn-frontend/index.ts
+  var UDNFrontend = class {
+    ws;
+    // handlers
+    connectionHandler = () => {
+    };
+    disconnectionHandler = () => {
+    };
+    messageHandler = (data) => {
+    };
+    // init
+    set onconnect(handler) {
+      this.connectionHandler = handler;
+    }
+    set ondisconnect(handler) {
+      this.disconnectionHandler = handler;
+    }
+    set onmessage(handler) {
+      this.messageHandler = handler;
+    }
+    // utility methods
+    send(messageObject) {
+      if (this.ws == void 0) return false;
+      const messageString = JSON.stringify(messageObject);
+      this.ws.send(messageString);
+      return true;
+    }
+    // public methods
+    connect(address) {
+      this.ws = new WebSocket(address);
+      this.ws.addEventListener("open", this.connectionHandler);
+      this.ws.addEventListener("close", this.disconnectionHandler);
+      this.ws.addEventListener("message", (message) => {
+        const dataString = message.data.toString();
+        const data = JSON.parse(dataString);
+        this.messageHandler(data);
+      });
+    }
+    sendMessage(channel, body) {
+      const messageObject = {
+        messageChannel: channel,
+        messageBody: body
+      };
+      return this.send(messageObject);
+    }
+    subscribe(channel) {
+      const messageObject = {
+        subscribeChannel: channel
+      };
+      return this.send(messageObject);
+    }
+    unsubscribe(channel) {
+      const messageObject = {
+        unsubscribeChannel: channel
+      };
+      return this.send(messageObject);
+    }
+  };
+
+  // src/model.ts
+  var UDN = new UDNFrontend();
+  var Channel = class {
+    constructor(channelName) {
+      this.channelName = channelName;
+    }
+    id = UUID();
+  };
+  var Message = class {
+    constructor(channel, sender, body, isoDate) {
+      this.channel = channel;
+      this.sender = sender;
+      this.body = body;
+      this.isoDate = isoDate;
+    }
+    id = UUID();
+  };
+  var currentAddress = new State("");
+  var serverAddress = restoreState("socket-address", "");
+  var isConnected = new State(false);
+  var cannotConnect = createProxyState(
+    [serverAddress, isConnected],
+    () => serverAddress.value == "" || currentAddress.value == serverAddress.value && isConnected.value == true
+  );
+  var currentPrimaryChannel = new State("");
+  var primaryChannel = restoreState("primary-channel", "");
+  var newSecondaryChannelName = new State("");
+  var secondaryChannels = restoreListState("secondary-channels");
+  var encryptionKey = restoreState("encryption-key", "");
+  var senderName = restoreState("sender-name", "");
+  var messageBody = restoreState("message", "");
+  var cannotSetChannel = createProxyState(
+    [primaryChannel, currentPrimaryChannel, isConnected],
+    () => primaryChannel.value == "" || primaryChannel.value == currentPrimaryChannel.value || isConnected.value == false
+  );
+  var cannotAddSecondaryChannel = createProxyState(
+    [newSecondaryChannelName],
+    () => newSecondaryChannelName.value == ""
+  );
+  var cannotSendMessage = createProxyState(
+    [currentPrimaryChannel, messageBody, senderName],
+    () => currentPrimaryChannel.value == "" || messageBody.value == "" || senderName.value == ""
+  );
+  var messages = restoreListState("messages");
+  function connect() {
+    if (cannotConnect.value == true) return;
+    currentAddress.value = serverAddress.value;
+    UDN.connect(serverAddress.value);
+  }
+  function sendMessage() {
+    if (cannotSendMessage.value == true) return;
+    const secondaryChannelNames = [
+      ...secondaryChannels.value.values()
+    ].map((channel) => channel.channelName);
+    const allChannelNames = [
+      primaryChannel.value,
+      ...secondaryChannelNames
+    ];
+    const joinedChannelName = allChannelNames.join("/");
+    const messageObject = new Message(
+      joinedChannelName,
+      senderName.value,
+      messageBody.value,
+      (/* @__PURE__ */ new Date()).toISOString()
+    );
+    const messageString = JSON.stringify(messageObject);
+    UDN.sendMessage(joinedChannelName, messageString);
+    messageBody.value = "";
+  }
+  function setChannel() {
+    if (cannotSetChannel.value == true) return;
+    if (currentPrimaryChannel != void 0) {
+      UDN.unsubscribe(currentPrimaryChannel.value);
+    }
+    UDN.subscribe(primaryChannel.value);
+  }
+  function addSecondaryChannel() {
+    if (cannotAddSecondaryChannel.value == true) return;
+    const channelObject = new Channel(newSecondaryChannelName.value);
+    secondaryChannels.add(channelObject);
+    newSecondaryChannelName.value = "";
+  }
+  function removeSecondaryChannel(channel) {
+    secondaryChannels.remove(channel);
+  }
+  UDN.onconnect = () => {
+    isConnected.value = true;
+  };
+  UDN.onmessage = (data) => {
+    if (data.subscribed != void 0 && data.messageChannel != void 0) {
+      return handleSubscriptionConfirmation(data.messageChannel, data.subscribed);
+    } else if (data.messageBody) {
+      handleMessage(data.messageBody);
+    }
+  };
+  UDN.ondisconnect = () => {
+    isConnected.value = false;
+  };
+  function handleSubscriptionConfirmation(channel, isSubscribed) {
+    console.log(channel, isSubscribed);
+    if (isSubscribed == true) {
+      currentPrimaryChannel.value = channel;
+    }
+  }
+  function handleMessage(body) {
+    try {
+      const object = JSON.parse(body);
+      if (!object.channel || !object.sender || !object.body || !object.isoDate)
+        return;
+      const messageObject = new Message(
+        object.channel,
+        object.sender,
+        object.body,
+        object.isoDate
+      );
+      messages.add(messageObject);
+    } catch {
+    }
+  }
+
   // src/translations.ts
   var englishTranslations = {
+    // general
+    setInput: "Set",
+    connectionStatus: "Connection status",
+    connectedTo: createProxyState(
+      [currentAddress],
+      () => `Connected to ${currentAddress}`
+    ),
+    disconnected: "Disconnected",
     // settings
     settings: "Settings",
+    connection: "Connection",
+    communication: "Communication",
+    encryption: "Encryption",
+    serverAddress: "Server Address",
+    serverAddressPlaceholder: "ws://192.168.0.69:3000",
+    connectToServer: "Connect",
+    primaryChannel: "Primary channel",
+    channelPlaceholder: "my-channel",
+    addSecondaryChannel: "Add secondary channel",
+    removeSecondaryChannel: "Remove secondary channel",
+    newSecondaryChannelPlaceholder: "Add secondary channel",
+    encryptionKey: "Encryption key",
+    encryptionKeyPlaceholder: "1jg028ej40d",
+    showEncryptionKey: "Show encryption key",
+    yourName: "Your Name",
+    yourNamePlaceholder: "Jane Doe",
     // messages
-    messages: "Messages"
+    messages: "Messages",
+    composerPlaceholder: "Type a message...",
+    sendMessage: "Send"
   };
-  var translations = {
+  var allTranslations = {
     en: englishTranslations
   };
-  function getText(key) {
-    const language = navigator.language.substring(0, 2);
-    if (translations[language]) {
-      return translations[language][key];
-    }
-    return translations.en[key];
+  var language = navigator.language.substring(0, 2);
+  var translation = allTranslations[language] ?? allTranslations.en;
+
+  // src/Views/messageComposer.tsx
+  function MessageComposer() {
+    return /* @__PURE__ */ createElement("div", { class: "flex-row width-100" }, /* @__PURE__ */ createElement(
+      "input",
+      {
+        class: "width-100 flex-1",
+        style: "max-width: unset",
+        placeholder: translation.composerPlaceholder,
+        "bind:value": messageBody,
+        "on:enter": sendMessage
+      }
+    ), /* @__PURE__ */ createElement(
+      "button",
+      {
+        class: "primary",
+        "on:click": sendMessage,
+        "toggle:disabled": cannotSendMessage
+      },
+      /* @__PURE__ */ createElement("span", { class: "icon" }, "send")
+    ));
   }
 
-  // src/messageTab.tsx
+  // src/Views/threadView.tsx
+  var messageConverter = (message) => {
+    return /* @__PURE__ */ createElement("div", { class: "tile width-100 flex-no" }, /* @__PURE__ */ createElement("div", { class: "flex-column" }, /* @__PURE__ */ createElement("span", { class: "secondary" }, message.sender, "@", message.channel), /* @__PURE__ */ createElement("b", null, message.body), /* @__PURE__ */ createElement("span", { class: "secondary" }, new Date(message.isoDate).toLocaleString())));
+  };
+  function ThreadView() {
+    return /* @__PURE__ */ createElement("div", { class: "flex-column gap", "subscribe:children": [messages, messageConverter] });
+  }
+
+  // src/Tabs/messageTab.tsx
   function MessageTab() {
-    return /* @__PURE__ */ createElement("article", { id: "message-tab" }, /* @__PURE__ */ createElement("header", null, getText("messages")));
+    return /* @__PURE__ */ createElement("article", { id: "message-tab" }, /* @__PURE__ */ createElement("header", null, translation.messages), ThreadView(), /* @__PURE__ */ createElement("footer", null, MessageComposer()));
   }
 
-  // src/settingsTab.tsx
+  // src/Views/communicationSection.tsx
+  var secondaryChannelConverter = (channel) => {
+    function remove() {
+      removeSecondaryChannel(channel);
+    }
+    return /* @__PURE__ */ createElement("div", { class: "tile padding-0" }, /* @__PURE__ */ createElement("div", { class: "flex-row justify-apart align-center" }, /* @__PURE__ */ createElement("b", { class: "padding-h" }, channel.channelName), /* @__PURE__ */ createElement(
+      "button",
+      {
+        class: "danger",
+        "aria-label": translation.removeSecondaryChannel,
+        "on:click": remove
+      },
+      /* @__PURE__ */ createElement("span", { class: "icon" }, "delete")
+    )));
+  };
+  function CommunicationSection() {
+    return /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("h2", null, translation.communication), /* @__PURE__ */ createElement("label", { class: "tile" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "account_circle"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translation.yourName), /* @__PURE__ */ createElement(
+      "input",
+      {
+        "bind:value": senderName,
+        placeholder: translation.yourNamePlaceholder
+      }
+    ))), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("label", { class: "tile" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "forum"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translation.primaryChannel), /* @__PURE__ */ createElement(
+      "input",
+      {
+        "bind:value": primaryChannel,
+        "on:enter": setChannel,
+        placeholder: translation.channelPlaceholder
+      }
+    ))), /* @__PURE__ */ createElement("div", { class: "flex-row width-input justify-end" }, /* @__PURE__ */ createElement(
+      "button",
+      {
+        class: "primary width-50",
+        "on:click": setChannel,
+        "toggle:disabled": cannotSetChannel
+      },
+      translation.setInput,
+      /* @__PURE__ */ createElement("span", { class: "icon" }, "check")
+    )), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("div", { class: "flex-row width-input margin-bottom" }, /* @__PURE__ */ createElement(
+      "input",
+      {
+        "bind:value": newSecondaryChannelName,
+        "on:enter": addSecondaryChannel,
+        placeholder: translation.newSecondaryChannelPlaceholder,
+        class: "width-100 flex"
+      }
+    ), /* @__PURE__ */ createElement(
+      "button",
+      {
+        class: "primary",
+        "on:click": addSecondaryChannel,
+        "toggle:disabled": cannotAddSecondaryChannel,
+        "aria-label": translation.addSecondaryChannel
+      },
+      /* @__PURE__ */ createElement("span", { class: "icon" }, "add")
+    )), /* @__PURE__ */ createElement(
+      "div",
+      {
+        class: "flex-column gap",
+        "subscribe:children": [secondaryChannels, secondaryChannelConverter]
+      }
+    ));
+  }
+
+  // src/Views/connectionSettingsView.tsx
+  function ConnectionInputView() {
+    return /* @__PURE__ */ createElement("div", { class: "flex-column" }, /* @__PURE__ */ createElement("label", { class: "tile" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "cell_tower"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translation.serverAddress), /* @__PURE__ */ createElement(
+      "input",
+      {
+        "bind:value": serverAddress,
+        "on:enter": connect,
+        placeholder: translation.serverAddressPlaceholder
+      }
+    ))), /* @__PURE__ */ createElement("div", { class: "flex-row width-input justify-end" }, /* @__PURE__ */ createElement(
+      "button",
+      {
+        class: "primary width-50",
+        "on:click": connect,
+        "toggle:disabled": cannotConnect
+      },
+      translation.connectToServer,
+      /* @__PURE__ */ createElement("span", { class: "icon" }, "arrow_forward")
+    )));
+  }
+
+  // src/Views/connectionStatusView.tsx
+  function ConnectionStatusView() {
+    return /* @__PURE__ */ createElement("div", { class: "tile width-input" }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("b", null, translation.connectionStatus), /* @__PURE__ */ createElement(
+      "span",
+      {
+        class: "success connected-only",
+        "subscribe:innerText": translation.connectedTo
+      }
+    ), /* @__PURE__ */ createElement("span", { class: "error disconnected-only" }, translation.disconnected)));
+  }
+
+  // src/Views/connectionSection.tsx
+  function ConnectionSection() {
+    return /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("h2", null, translation.connection), ConnectionStatusView(), /* @__PURE__ */ createElement("hr", null), ConnectionInputView());
+  }
+
+  // src/Views/encryptionSection.tsx
+  var shouldShowKey = new State(false);
+  var inputType = createProxyState(
+    [shouldShowKey],
+    () => shouldShowKey.value ? "text" : "password"
+  );
+  function EncryptionSection() {
+    return /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("h2", null, translation.encryption), /* @__PURE__ */ createElement("label", { class: "tile" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "key"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translation.encryptionKey), /* @__PURE__ */ createElement(
+      "input",
+      {
+        "bind:value": encryptionKey,
+        "set:type": inputType,
+        placeholder: translation.encryptionKeyPlaceholder
+      }
+    ))), /* @__PURE__ */ createElement("label", { class: "inline" }, /* @__PURE__ */ createElement("input", { type: "checkbox", "bind:checked": shouldShowKey }), translation.showEncryptionKey));
+  }
+
+  // src/Tabs/settingsTab.tsx
   function SettingsTab() {
-    return /* @__PURE__ */ createElement("article", { id: "settings-tab" }, /* @__PURE__ */ createElement("header", null, getText("settings")));
+    return /* @__PURE__ */ createElement("article", { id: "settings-tab", "toggle:connected": isConnected }, /* @__PURE__ */ createElement("header", null, translation.settings), /* @__PURE__ */ createElement("div", null, ConnectionSection(), CommunicationSection(), EncryptionSection(), /* @__PURE__ */ createElement("hr", { class: "mobile-only" }), /* @__PURE__ */ createElement(
+      "a",
+      {
+        href: "#message-tab",
+        class: "mobile-only width-100 flex-row justify-end control-gap"
+      },
+      translation.messages,
+      /* @__PURE__ */ createElement("span", { class: "icon" }, "arrow_forward")
+    )));
   }
 
   // src/index.tsx
-  document.body.prepend(
-    /* @__PURE__ */ createElement("menu", null, /* @__PURE__ */ createElement("a", { class: "tab-link", href: "#settings-tab", active: true }, /* @__PURE__ */ createElement("span", { class: "icon" }, "settings"), getText("settings")), /* @__PURE__ */ createElement("a", { class: "tab-link", href: "#message-tab" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "forum"), getText("messages")))
-  );
   document.querySelector("main").append(SettingsTab(), MessageTab());
+  document.querySelector("main").classList.add("split");
 })();

dist/styles.css

@@ -257,6 +257,12 @@ TYPE
   src: url("Fonts/IBMPlexSans-Regular.ttf");
 }
 
+@font-face {
+  font-family: IBM Plex Sans;
+  src: url("Fonts/IBMPlexSans-Bold.ttf");
+  font-weight: bold;
+}
+
 @font-face {
   font-family: IBM Plex Mono;
   src: url("Fonts/IBMPlexMono-Regular.ttf");
@@ -338,7 +344,7 @@ a,
 
 /* display etc */
 .align-start {
-  align-items: start;
+  align-items: start !important;
 }
 
 button:not(.tile),
@@ -349,13 +355,16 @@ label.inline,
 .modal,
 select,
 textarea,
-.align-center,
 .tile:not(label) {
   align-items: center;
 }
 
+.align-center {
+  align-items: center !important;
+}
+
 .align-end {
-  align-items: end;
+  align-items: end !important;
 }
 
 label,
@@ -369,8 +378,6 @@ input[type="checkbox"],
 input[type="radio"],
 label.inline,
 main,
-.flex-column,
-.flex-row,
 .modal[open],
 .modal > div,
 .tile,
@@ -378,8 +385,13 @@ main,
   display: flex;
 }
 
+.flex-column,
+.flex-row {
+  display: flex;
+}
+
 .grid {
-  display: grid;
+  display: grid !important;
 }
 
 button:not(.tile),
@@ -395,49 +407,78 @@ textarea {
 }
 
 main,
-.flex,
 .tile,
 .tile > div {
   flex: 1;
 }
 
-.flex-column,
+.flex {
+  flex: 1 !important;
+}
+
+.flex-no {
+  flex: 0 !important;
+}
+
 .modal > div,
 .tile > div {
   flex-direction: column;
 }
 
+.flex-column {
+  flex-direction: column !important;
+}
+
+.flex-row {
+  flex-direction: row !important;
+}
+
+.flex-wrap {
+  flex-wrap: wrap !important;
+}
+
 button,
-.tile {
+label.inline,
+.tile,
+.control-gap {
   gap: var(--gap-in-controls);
 }
 
 .gap {
-  gap: var(--gap-between-tiles);
+  gap: var(--gap-between-tiles) !important;
 }
 
 header,
-button,
-.justify-apart {
+button {
   justify-content: space-between;
 }
 
-.justify-start,
+.justify-apart {
+  justify-content: space-between !important;
+}
+
 .tile {
   justify-content: start;
 }
 
+.justify-start {
+  justify-content: start !important;
+}
+
 footer,
 header button,
 input[type="checkbox"],
 input[type="radio"],
-.justify-center,
 .modal {
   justify-content: center;
 }
 
+.justify-center {
+  justify-content: center !important;
+}
+
 .justify-end {
-  justify-content: end;
+  justify-content: end !important;
 }
 
 /* opacity */
@@ -455,12 +496,19 @@ label span,
 /* padding, margin, etc */
 h1,
 h2,
-h3,
+h3 {
+  margin: var(--control-padding) 0px;
+}
+
 main,
 p {
   margin: 0px;
 }
 
+.margin-0 {
+  margin: 0px !important;
+}
+
 hr {
   margin: var(--content-margin) 0px;
 }
@@ -473,6 +521,10 @@ label:not(.tile) {
   margin-bottom: var(--label-margin-bottom);
 }
 
+.margin-bottom {
+  margin-bottom: var(--gap-between-tiles) !important;
+}
+
 label.tile {
   margin-bottom: var(--gap-between-tiles);
 }
@@ -491,6 +543,10 @@ input[type="radio"] {
   padding: 0px;
 }
 
+.padding-0 {
+  padding: 0 !important;
+}
+
 article > div {
   padding: var(--content-padding);
 }
@@ -501,11 +557,20 @@ select {
   padding: 0px var(--control-padding);
 }
 
+.padding-h {
+  padding: 0px var(--control-padding) !important;
+}
+
+label.inline,
 textarea,
 .tile:not(label) {
   padding: var(--control-padding);
 }
 
+.padding {
+  padding: var(--control-padding) !important;
+}
+
 .modal main {
   padding: var(--modal-padding);
 }
@@ -522,13 +587,17 @@ label.tile:has(> span.icon) {
   padding-left: var(--control-padding);
 }
 
+label.tile:has(> span.icon) input {
+  padding-left: 0px;
+}
+
 article > div {
   padding-bottom: calc(
     var(--menu-height-mobile) + var(--control-height) + var(--content-padding)
   );
 }
 
-label {
+label:not(.inline) {
   text-indent: var(--control-padding);
 }
 
@@ -545,76 +614,104 @@ label.tile:has(> span.icon) {
 article > div,
 footer,
 header,
-select + .icon,
-.absolute {
+select + .icon {
   position: absolute;
 }
 
-.modal,
-.fixed {
+.absolute {
+  position: absolute !important;
+}
+
+.modal {
   position: fixed;
 }
 
+.fixed {
+  position: fixed !important;
+}
+
 article,
 main,
 input,
-label,
-.relative {
+label {
   position: relative;
 }
 
+.relative {
+  position: relative !important;
+}
+
 .sticky {
-  position: sticky;
+  position: sticky !important;
 }
 
 article > div,
 header,
-.modal,
-.top-0 {
+.modal {
   top: 0;
 }
 
-article > div,
-footer,
-header,
-.modal,
-.left-0 {
-  left: 0px;
+.top-0 {
+  top: 0 !important;
 }
 
 article > div,
 footer,
 header,
-.modal,
-.right-0 {
+.modal {
+  left: 0px;
+}
+
+.left-0 {
+  left: 0px !important;
+}
+
+article > div,
+footer,
+header,
+.modal {
   right: 0px;
 }
 
+.right-0 {
+  right: 0px !important;
+}
+
 select + .icon {
   right: var(--control-marker-padding);
 }
 
 footer {
+  bottom: var(--safe-area-bottom);
+}
+
+body:has(> menu) footer {
   bottom: var(--menu-height-mobile);
 }
 
 article > div,
 select + .icon,
-.modal,
-.bottom-0 {
+.modal {
   bottom: 0px;
 }
 
+.bottom-0 {
+  bottom: 0px !important;
+}
+
 /* size */
 article,
 main,
 select + .icon,
-.height-100,
 .modal > div,
 .modal main {
   height: 100%;
 }
 
+.height-100 {
+  height: 100% !important;
+}
+
 button:not(.tile):not(header *),
 footer,
 input:not([type="checkbox"]):not([type="radio"]),
@@ -634,7 +731,7 @@ article {
 }
 
 .width-50 {
-  width: 50%;
+  width: 50% !important;
 }
 
 article,
@@ -645,12 +742,15 @@ main,
 select,
 textarea,
 .modal > div,
+.tile,
+.tile > div {
+  width: 100%;
+}
+
 .width-content,
 .width-input,
-.tile,
-.tile > div,
 .width-100 {
-  width: 100%;
+  width: 100% !important;
 }
 
 header button {
@@ -853,7 +953,7 @@ main {
   scroll-snap-type: x mandatory;
 }
 
-/* desktop */
+/* tablet & up */
 @media (min-width: 640px) {
   /* basic */
   .mobile-only {
@@ -876,19 +976,25 @@ main {
   }
 
   p,
-  .width-content,
   .modal > div {
     max-width: var(--max-content-width);
   }
 
+  .width-content {
+    max-width: var(--max-content-width) !important;
+  }
+
   input,
   label,
   select,
-  textarea,
-  .width-input {
+  textarea {
     max-width: var(--max-input-width);
   }
 
+  .width-input {
+    max-width: var(--max-input-width) !important;
+  }
+
   /* layout */
   body {
     flex-direction: row;
@@ -929,6 +1035,13 @@ main {
   }
 }
 
+/* desktop */
+@media (min-width: 1024px) {
+  :root {
+    --split-pane-width-desktop: 400px;
+  }
+}
+
 /*
 ICONS
  */