feat(ui): reduce opacity of sidebar pane content when not editing

Reviewed-on: https://git.clan.lol/clan/clan-core/pulls/4479

.gitea/workflows/build-clan-app-darwin.yml

@@ -0,0 +1,20 @@
+name: Build Clan App (Darwin)
+
+on:
+  schedule:
+    # Run every 4 hours
+    - cron: "0 */4 * * *"
+  workflow_dispatch:
+  push:
+    branches:
+      - main
+
+jobs:
+  build-clan-app-darwin:
+    runs-on: nix
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Build clan-app for x86_64-darwin
+        run: |
+          nix build .#packages.x86_64-darwin.clan-app --system x86_64-darwin --log-format bar-with-logs

.gitea/workflows/create-pr.sh

@@ -1,6 +1,7 @@
-#!/usr/bin/env bash
+#!/bin/sh
+
 # Shared script for creating pull requests in Gitea workflows
-set -euo pipefail
+set -eu
 
 # Required environment variables:
 # - CI_BOT_TOKEN: Gitea bot token for authentication
@@ -8,22 +9,22 @@ set -euo pipefail
 # - PR_TITLE: Title of the pull request
 # - PR_BODY: Body/description of the pull request
 
-if [[ -z "${CI_BOT_TOKEN:-}" ]]; then
+if [ -z "${CI_BOT_TOKEN:-}" ]; then
   echo "Error: CI_BOT_TOKEN is not set" >&2
   exit 1
 fi
 
-if [[ -z "${PR_BRANCH:-}" ]]; then
+if [ -z "${PR_BRANCH:-}" ]; then
   echo "Error: PR_BRANCH is not set" >&2
   exit 1
 fi
 
-if [[ -z "${PR_TITLE:-}" ]]; then
+if [ -z "${PR_TITLE:-}" ]; then
   echo "Error: PR_TITLE is not set" >&2
   exit 1
 fi
 
-if [[ -z "${PR_BODY:-}" ]]; then
+if [ -z "${PR_BODY:-}" ]; then
   echo "Error: PR_BODY is not set" >&2
   exit 1
 fi
@@ -43,9 +44,12 @@ resp=$(nix run --inputs-from . nixpkgs#curl -- -X POST \
   }" \
   "https://git.clan.lol/api/v1/repos/clan/clan-core/pulls")
 
-pr_number=$(echo "$resp" | jq -r '.number')
+if ! pr_number=$(echo "$resp" | jq -r '.number'); then
+  echo "Error parsing response from pull request creation" >&2
+  exit 1
+fi
 
-if [[ "$pr_number" == "null" ]]; then
+if [ "$pr_number" = "null" ]; then
   echo "Error creating pull request:" >&2
   echo "$resp" | jq . >&2
   exit 1
@@ -64,12 +68,15 @@ while true; do
       "delete_branch_after_merge": true
     }' \
     "https://git.clan.lol/api/v1/repos/clan/clan-core/pulls/$pr_number/merge")
-  msg=$(echo "$resp" | jq -r '.message')
-  if [[ "$msg" != "Please try again later" ]]; then
+  if ! msg=$(echo "$resp" | jq -r '.message'); then
+    echo "Error parsing merge response" >&2
+    exit 1
+  fi
+  if [ "$msg" != "Please try again later" ]; then
     break
   fi
   echo "Retrying in 2 seconds..."
   sleep 2
 done
 
-echo "Pull request #$pr_number merge initiated"
+echo "Pull request #$pr_number merge initiated"

.gitea/workflows/update-flake-inputs.yml

@@ -0,0 +1,26 @@
+name: Update Flake Inputs
+
+on:
+  schedule:
+    # Run every 5 hours
+    - cron: "0 */5 * * *"
+  workflow_dispatch:
+  repository_dispatch:
+
+jobs:
+  update-flake-inputs:
+    runs-on: nix
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Update flake inputs
+        uses: Mic92/update-flake-inputs-gitea@main
+        with:
+          # Exclude private flakes and update-clan-core checks flake
+
+          exclude-patterns: "devFlake/private/flake.nix,checks/impure/flake.nix"
+          auto-merge: true
+          gitea-token: ${{ secrets.CI_BOT_TOKEN }}
+          github-token: ${{ secrets.CI_BOT_GITHUB_TOKEN }}

.gitignore

@@ -43,3 +43,13 @@ pkgs/clan-app/ui/api/Inventory.ts
 pkgs/clan-app/ui/api/modules_schemas.json
 pkgs/clan-app/ui/api/schema.json
 pkgs/clan-app/ui/.fonts
+
+# To avoid accidentally committing large files
+# Can be added with `git add -f` after reviewing the filesize
+# Large files should be avoided or stored externally i.e. a gitea release
+*.jpg
+*.png
+*.jpeg
+*.gif
+*.mp4
+*.mkv

README.md

@@ -24,7 +24,7 @@ If you're new to Clan and eager to dive in, start with our quickstart guide and
 
 In the Clan ecosystem, security is paramount. Learn how to handle secrets effectively:
 
-- **Secrets Management**: Securely manage secrets by consulting [secrets](https://docs.clan.lol/guides/getting-started/secrets/)<!-- [secrets.md](docs/site/guides/getting-started/secrets.md) -->.
+- **Secrets Management**: Securely manage secrets by consulting [Vars](https://docs.clan.lol/guides/vars-backend/)<!-- [secrets.md](docs/site/guides/vars-backend.md) -->.
 
 ### Contributing to Clan
 

clanModules/nginx/default.nix

@@ -38,7 +38,6 @@
       recommendedOptimisation = lib.mkDefault true;
       recommendedProxySettings = lib.mkDefault true;
       recommendedTlsSettings = lib.mkDefault true;
-      recommendedZstdSettings = lib.mkDefault true;
 
       # Nginx sends all the access logs to /var/log/nginx/access.log by default.
       # instead of going to the journal!

clanServices/admin/default.nix

@@ -9,15 +9,37 @@
     interface =
       { lib, ... }:
       {
-        options.allowedKeys = lib.mkOption {
-          default = { };
-          type = lib.types.attrsOf lib.types.str;
-          description = "The allowed public keys for ssh access to the admin user";
-          example = {
-            "key_1" = "ssh-rsa AAAAB3NzaC1yc2EAAAADAQABAAABAQD...";
+
+        options = {
+          allowedKeys = lib.mkOption {
+            default = { };
+            type = lib.types.attrsOf lib.types.str;
+            description = "The allowed public keys for ssh access to the admin user";
+            example = {
+              "key_1" = "ssh-rsa AAAAB3NzaC1yc2EAAAADAQABAAABAQD...";
+            };
+          };
+
+          rsaHostKey.enable = lib.mkEnableOption "Generate RSA host key";
+
+          # TODO: allow per-server domains that we than collect in the inventory
+          #certicficateDomains = lib.mkOption {
+          #  type = lib.types.listOf lib.types.str;
+          #  default = [ ];
+          #  example = [ "git.mydomain.com" ];
+          #  description = "List of domains to include in the certificate. This option will not prepend the machine name in front of each domain.";
+          #};
+
+          certificateSearchDomains = lib.mkOption {
+            type = lib.types.listOf lib.types.str;
+            default = [ ];
+            example = [ "mydomain.com" ];
+            description = ''
+              List of domains to include in the certificate.
+              This option will prepend the machine name in front of each domain before adding it to the certificate.
+            '';
           };
         };
-
       };
 
     perInstance =
@@ -27,10 +49,15 @@
           { ... }:
           {
             imports = [
-              ../../clanModules/sshd
-              ../../clanModules/root-password
+              # We don't have a good way to specify dependencies between
+              # clanServices for now. When it get's implemtende, we should just
+              # use the ssh and users modules here.
+              ./ssh.nix
+              ./root-password.nix
             ];
 
+            _module.args = { inherit settings; };
+
             users.users.root.openssh.authorizedKeys.keys = builtins.attrValues settings.allowedKeys;
           };
       };

clanServices/admin/root-password.nix

@@ -0,0 +1,39 @@
+# We don't have a way of specifying dependencies between clanServices for now.
+# When it get's added this file should be removed and the users module used instead.
+{
+  config,
+  pkgs,
+  ...
+}:
+{
+
+  users.mutableUsers = false;
+  users.users.root.hashedPasswordFile =
+    config.clan.core.vars.generators.root-password.files.password-hash.path;
+
+  clan.core.vars.generators.root-password = {
+    files.password-hash.neededFor = "users";
+
+    files.password.deploy = false;
+
+    runtimeInputs = [
+      pkgs.coreutils
+      pkgs.mkpasswd
+      pkgs.xkcdpass
+    ];
+
+    prompts.password.type = "hidden";
+    prompts.password.persist = true;
+    prompts.password.description = "You can autogenerate a password, if you leave this prompt blank.";
+
+    script = ''
+      prompt_value="$(cat "$prompts"/password)"
+      if [[ -n "''${prompt_value-}" ]]; then
+        echo "$prompt_value" | tr -d "\n" > "$out"/password
+      else
+        xkcdpass --numwords 5 --delimiter - --count 1 | tr -d "\n" > "$out"/password
+      fi
+      mkpasswd -s -m sha-512 < "$out"/password | tr -d "\n" > "$out"/password-hash
+    '';
+  };
+}

clanServices/admin/ssh.nix

@@ -0,0 +1,115 @@
+{
+  config,
+  pkgs,
+  lib,
+  settings,
+  ...
+}:
+let
+  stringSet = list: builtins.attrNames (builtins.groupBy lib.id list);
+
+  domains = stringSet settings.certificateSearchDomains;
+
+in
+{
+
+  services.openssh = {
+    enable = true;
+    settings.PasswordAuthentication = false;
+
+    settings.HostCertificate = lib.mkIf (
+      settings.certificateSearchDomains != [ ]
+    ) config.clan.core.vars.generators.openssh-cert.files."ssh.id_ed25519-cert.pub".path;
+
+    hostKeys =
+      [
+        {
+          path = config.clan.core.vars.generators.openssh.files."ssh.id_ed25519".path;
+          type = "ed25519";
+        }
+      ]
+      ++ lib.optional settings.rsaHostKey.enable {
+        path = config.clan.core.vars.generators.openssh-rsa.files."ssh.id_rsa".path;
+        type = "rsa";
+      };
+  };
+
+  clan.core.vars.generators.openssh = {
+    files."ssh.id_ed25519" = { };
+    files."ssh.id_ed25519.pub".secret = false;
+    migrateFact = "openssh";
+    runtimeInputs = [
+      pkgs.coreutils
+      pkgs.openssh
+    ];
+    script = ''
+      ssh-keygen -t ed25519 -N "" -C "" -f "$out"/ssh.id_ed25519
+    '';
+  };
+
+  programs.ssh.knownHosts.clan-sshd-self-ed25519 = {
+    hostNames = [
+      "localhost"
+      config.networking.hostName
+    ] ++ (lib.optional (config.networking.domain != null) config.networking.fqdn);
+    publicKey = config.clan.core.vars.generators.openssh.files."ssh.id_ed25519.pub".value;
+  };
+
+  clan.core.vars.generators.openssh-rsa = lib.mkIf settings.rsaHostKey.enable {
+    files."ssh.id_rsa" = { };
+    files."ssh.id_rsa.pub".secret = false;
+    runtimeInputs = [
+      pkgs.coreutils
+      pkgs.openssh
+    ];
+    script = ''
+      ssh-keygen -t rsa -b 4096 -N "" -C "" -f "$out"/ssh.id_rsa
+    '';
+  };
+
+  clan.core.vars.generators.openssh-cert = lib.mkIf (settings.certificateSearchDomains != [ ]) {
+    files."ssh.id_ed25519-cert.pub".secret = false;
+    dependencies = [
+      "openssh"
+      "openssh-ca"
+    ];
+    validation = {
+      name = config.clan.core.settings.machine.name;
+      domains = lib.genAttrs settings.certificateSearchDomains lib.id;
+    };
+    runtimeInputs = [
+      pkgs.openssh
+      pkgs.jq
+    ];
+    script = ''
+      ssh-keygen \
+        -s $in/openssh-ca/id_ed25519 \
+        -I ${config.clan.core.settings.machine.name} \
+        -h \
+        -n ${lib.concatMapStringsSep "," (d: "${config.clan.core.settings.machine.name}.${d}") domains} \
+        $in/openssh/ssh.id_ed25519.pub
+      mv $in/openssh/ssh.id_ed25519-cert.pub "$out"/ssh.id_ed25519-cert.pub
+    '';
+  };
+
+  clan.core.vars.generators.openssh-ca = lib.mkIf (settings.certificateSearchDomains != [ ]) {
+    share = true;
+    files.id_ed25519.deploy = false;
+    files."id_ed25519.pub" = {
+      deploy = false;
+      secret = false;
+    };
+    runtimeInputs = [
+      pkgs.openssh
+    ];
+    script = ''
+      ssh-keygen -t ed25519 -N "" -C "" -f "$out"/id_ed25519
+    '';
+  };
+
+  programs.ssh.knownHosts.ssh-ca = lib.mkIf (settings.certificateSearchDomains != [ ]) {
+    certAuthority = true;
+    extraHostNames = builtins.map (domain: "*.${domain}") settings.certificateSearchDomains;
+    publicKey = config.clan.core.vars.generators.openssh-ca.files."id_ed25519.pub".value;
+  };
+}

clanServices/internet/default.nix

@@ -0,0 +1,47 @@
+{ ... }:
+{
+  _class = "clan.service";
+  manifest.name = "clan-core/internet";
+  manifest.description = "direct access (or via ssh jumphost) to machines";
+  manifest.categories = [
+    "System"
+    "Network"
+  ];
+  roles.default = {
+    interface =
+      { lib, ... }:
+      {
+        options = {
+          host = lib.mkOption {
+            type = lib.types.str;
+            description = ''
+              ip address or hostname (domain) of the machine
+            '';
+          };
+          jumphosts = lib.mkOption {
+            type = lib.types.listOf lib.types.str;
+            default = [ ];
+            description = ''
+              optional list of jumphosts to use to connect to the machine
+            '';
+          };
+        };
+      };
+    perInstance =
+      {
+        roles,
+        lib,
+        settings,
+        ...
+      }:
+      {
+        exports.networking = {
+          # TODO add user space network support to clan-cli
+          peers = lib.mapAttrs (_name: machine: {
+            host.plain = machine.settings.host;
+            SSHOptions = map (_x: "-J x") machine.settings.jumphosts;
+          }) roles.default.machines;
+        };
+      };
+  };
+}

clanServices/internet/flake-module.nix

@@ -0,0 +1,9 @@
+{ lib, ... }:
+let
+  module = lib.modules.importApply ./default.nix { };
+in
+{
+  clan.modules = {
+    internet = module;
+  };
+}

clanServices/tor/default.nix

@@ -0,0 +1,110 @@
+{ ... }:
+{
+  _class = "clan.service";
+  manifest.name = "clan-core/tor";
+  manifest.description = "Onion routing, use Hidden services to connect your machines";
+  manifest.categories = [
+    "System"
+    "Network"
+  ];
+
+  roles.client = {
+    perInstance =
+      {
+        ...
+      }:
+      {
+        nixosModule =
+          {
+            ...
+          }:
+          {
+            config = {
+              services.tor = {
+                enable = true;
+                torsocks.enable = true;
+                client.enable = true;
+              };
+            };
+          };
+      };
+  };
+
+  roles.server = {
+    # interface =
+    #   { lib, ... }:
+    #   {
+    #     options = {
+    #       OciSettings = lib.mkOption {
+    #         type = lib.types.raw;
+    #         default = null;
+    #         description = "NixOS settings for virtualisation.oci-container.<name>.settings";
+    #       };
+    #       buildContainer = lib.mkOption {
+    #         type = lib.types.nullOr lib.types.str;
+    #         default = null;
+    #       };
+    #     };
+    #   };
+    perInstance =
+      {
+        instanceName,
+        roles,
+        lib,
+        ...
+      }:
+      {
+        exports.networking = {
+          priority = lib.mkDefault 10;
+          # TODO add user space network support to clan-cli
+          module = "clan_lib.network.tor";
+          peers = lib.mapAttrs (name: machine: {
+            host.var = {
+              machine = name;
+              generator = "tor_${instanceName}";
+              file = "hostname";
+            };
+          }) roles.server.machines;
+        };
+        nixosModule =
+          {
+            pkgs,
+            config,
+            ...
+          }:
+          {
+            config = {
+              services.tor = {
+                enable = true;
+                relay.onionServices."clan_${instanceName}" = {
+                  version = 3;
+                  # TODO get ports from instance machine config
+                  map = [
+                    {
+                      port = 22;
+                      target.port = 22;
+                    }
+                  ];
+                  secretKey = config.clan.core.vars.generators."tor_${instanceName}".files.hs_ed25519_secret_key.path;
+                };
+              };
+              clan.core.vars.generators."tor_${instanceName}" = {
+                files.hs_ed25519_secret_key = { };
+                files.hostname = { };
+                runtimeInputs = with pkgs; [
+                  coreutils
+                  tor
+                ];
+                script = ''
+                  mkdir -p data
+                  echo -e "DataDirectory ./data\nSocksPort 0\nHiddenServiceDir ./hs\nHiddenServicePort 80 127.0.0.1:80" > torrc
+                  timeout 2 tor -f torrc || :
+                  mv hs/hs_ed25519_secret_key $out/hs_ed25519_secret_key
+                  mv hs/hostname $out/hostname
+                '';
+              };
+            };
+          };
+      };
+  };
+}

clanServices/tor/flake-module.nix

@@ -0,0 +1,9 @@
+{ lib, ... }:
+let
+  module = lib.modules.importApply ./default.nix { };
+in
+{
+  clan.modules = {
+    tor = module;
+  };
+}

clanServices/users/default.nix

@@ -11,7 +11,7 @@
 
   roles.default = {
     interface =
-      { config, lib, ... }:
+      { lib, ... }:
       {
         options = {
           user = lib.mkOption {
@@ -37,23 +37,6 @@
               - `clan vars get <machine-name> <name-of-password-variable>`
             '';
           };
-          regularUser = lib.mkOption {
-            type = lib.types.bool;
-            default = config.user != "root";
-            defaultText = lib.literalExpression "config.user != \"root\"";
-            example = false;
-            description = ''
-              Whether the user should be a regular user or a system user.
-
-              Regular users are normal users that can log in and have a home directory.
-
-              System users are used for system services and do not have a home directory.
-
-              !!! Warning
-                  `root` cannot be a regular user.
-                  You must set this to `false` for `root`
-            '';
-          };
           groups = lib.mkOption {
             type = lib.types.listOf lib.types.str;
             default = [ ];
@@ -91,7 +74,7 @@
           }:
           {
             users.users.${settings.user} = {
-              isNormalUser = settings.regularUser;
+              isNormalUser = if settings.user == "root" then false else true;
               extraGroups = settings.groups;
 
               hashedPasswordFile =

clanServices/wifi/default.nix

@@ -39,7 +39,7 @@ in
     };
 
     perInstance =
-      { settings, ... }:
+      { instanceName, settings, ... }:
       {
         nixosModule =
           { pkgs, config, ... }:
@@ -86,7 +86,7 @@ in
 
             # service to generate the environment file containing all secrets, as
             #   expected by the nixos NetworkManager-ensure-profile service
-            systemd.services.NetworkManager-setup-secrets = {
+            systemd.services."NetworkManager-setup-secrets-${instanceName}" = {
               description = "Generate wifi secrets for NetworkManager";
               requiredBy = [ "NetworkManager-ensure-profiles.service" ];
               partOf = [ "NetworkManager-ensure-profiles.service" ];

clanServices/wifi/tests/vm/default.nix

@@ -7,8 +7,16 @@
     inventory = {
 
       machines.test = { };
+      machines.second = { };
 
       instances = {
+        wg-test-all = {
+          module.name = "@clan/wifi";
+          module.input = "self";
+          roles.default.tags.all = { };
+          roles.default.settings.networks.all = { };
+        };
+
         wg-test-one = {
           module.name = "@clan/wifi";
           module.input = "self";

clanServices/zerotier/default.nix

@@ -134,9 +134,9 @@
               systemd.services.zerotier-inventory-autoaccept =
                 let
                   machines = uniqueStrings (
-                    (lib.attrNames roles.moon.machines)
-                    ++ (lib.attrNames roles.controller.machines)
-                    ++ (lib.attrNames roles.peer.machines)
+                    (lib.optionals (roles ? moon) (lib.attrNames roles.moon.machines))
+                    ++ (lib.optionals (roles ? controller) (lib.attrNames roles.controller.machines))
+                    ++ (lib.optionals (roles ? peer) (lib.attrNames roles.peer.machines))
                   );
                   networkIps = builtins.foldl' (
                     ips: name:

clanServices/zerotier/tests/eval-tests.nix

@@ -32,6 +32,33 @@ let
         };
       };
     }).config;
+  testFlakeNoMoon =
+    (clanLib.clan {
+      self = { };
+      directory = ./vm;
+
+      machines.jon = {
+        nixpkgs.hostPlatform = "x86_64-linux";
+      };
+      machines.sara = {
+        nixpkgs.hostPlatform = "x86_64-linux";
+      };
+      machines.bam = {
+        nixpkgs.hostPlatform = "x86_64-linux";
+      };
+
+      modules.zerotier = module;
+
+      inventory.instances = {
+        zerotier = {
+          module.name = "zerotier";
+          module.input = "self";
+
+          roles.peer.tags.all = { };
+          roles.controller.machines.bam = { };
+        };
+      };
+    }).config;
 in
 {
   test_peers = {
@@ -73,4 +100,30 @@ in
       networkName = "zerotier";
     };
   };
+  test_peers_no_moon = {
+    expr = {
+      hasNetworkIds = testFlakeNoMoon.nixosConfigurations.jon.config.services.zerotierone.joinNetworks;
+      isController =
+        testFlakeNoMoon.nixosConfigurations.jon.config.clan.core.networking.zerotier.controller.enable;
+      networkName = testFlakeNoMoon.nixosConfigurations.jon.config.clan.core.networking.zerotier.name;
+    };
+    expected = {
+      hasNetworkIds = [ "0e28cb903344475e" ];
+      isController = false;
+      networkName = "zerotier";
+    };
+  };
+  test_controller_no_moon = {
+    expr = {
+      hasNetworkIds = testFlakeNoMoon.nixosConfigurations.bam.config.services.zerotierone.joinNetworks;
+      isController =
+        testFlakeNoMoon.nixosConfigurations.bam.config.clan.core.networking.zerotier.controller.enable;
+      networkName = testFlakeNoMoon.nixosConfigurations.bam.config.clan.core.networking.zerotier.name;
+    };
+    expected = {
+      hasNetworkIds = [ "0e28cb903344475e" ];
+      isController = true;
+      networkName = "zerotier";
+    };
+  };
 }

docs/mkdocs.yml

@@ -48,34 +48,25 @@ nav:
   - Home: index.md
   - Guides:
       - Getting Started:
-          - 🚀 Creating Your First Clan: guides/getting-started/index.md
-          - 📀 Create USB Installer (optional): guides/getting-started/installer.md
-          - ⚙️ Add Machines: guides/getting-started/add-machines.md
-          - ⚙️ Add User: guides/getting-started/add-user.md
-          - ⚙️ Add Services: guides/getting-started/add-services.md
-          - 🔐 Secrets & Facts: guides/getting-started/secrets.md
-          - 🚢 Deploy Machine: guides/getting-started/deploy.md
-          - 🧪 Continuous Integration: guides/getting-started/check.md
-      - clanServices: guides/clanServices.md
-      - Disk Encryption: guides/disk-encryption.md
-      - Mesh VPN: guides/mesh-vpn.md
+          - Creating Your First Clan: guides/getting-started/index.md
+          - Create USB Installer: guides/getting-started/installer.md
+          - Add Machines: guides/getting-started/add-machines.md
+          - Add User: guides/getting-started/add-user.md
+          - Add Services: guides/getting-started/add-services.md
+          - Deploy Machine: guides/getting-started/deploy.md
+          - Continuous Integration: guides/getting-started/check.md
+      - Inventory: guides/inventory.md
+      - Using Services: guides/clanServices.md
       - Backup & Restore: guides/backups.md
-      - Vars Backend: guides/vars-backend.md
-      - Facts Backend: guides/secrets.md
-      - Adding more machines: guides/more-machines.md
+      - Disk Encryption: guides/disk-encryption.md
+      - Vars: guides/vars-backend.md
+      - Age Plugins: guides/age-plugins.md
+      - Advanced Secrets: guides/secrets.md
+      - Machine Autoincludes: guides/more-machines.md
       - Target Host: guides/target-host.md
-      - Inventory:
-          - Inventory: guides/inventory.md
+      - Zerotier VPN: guides/mesh-vpn.md
       - Secure Boot: guides/secure-boot.md
       - Flake-parts: guides/flake-parts.md
-      - Authoring:
-          - clanService: guides/authoring/clanServices/index.md
-          - Disk Template: guides/authoring/templates/disk/disko-templates.md
-          - clanModule: guides/authoring/clanModules/index.md
-      - Contributing:
-          - Contribute: guides/contributing/CONTRIBUTING.md
-          - Debugging: guides/contributing/debugging.md
-          - Testing: guides/contributing/testing.md
       - Migrations:
           - Migrate existing Flakes: guides/migrations/migration-guide.md
           - Migrate inventory Services: guides/migrations/migrate-inventory-services.md
@@ -85,66 +76,84 @@ nav:
   - Reference:
       - Overview: reference/index.md
       - Services:
-          - Overview: reference/clanServices/index.md
-          - reference/clanServices/admin.md
-          - reference/clanServices/borgbackup.md
-          - reference/clanServices/data-mesher.md
-          - reference/clanServices/emergency-access.md
-          - reference/clanServices/garage.md
-          - reference/clanServices/hello-world.md
-          - reference/clanServices/importer.md
-          - reference/clanServices/mycelium.md
-          - reference/clanServices/packages.md
-          - reference/clanServices/sshd.md
-          - reference/clanServices/state-version.md
-          - reference/clanServices/trusted-nix-caches.md
-          - reference/clanServices/users.md
-          - reference/clanServices/wifi.md
-          - reference/clanServices/zerotier.md
-      - Interface for making Services: reference/clanServices/clan-service-author-interface.md
+          - List:
+              - Overview: reference/clanServices/index.md
+              - reference/clanServices/admin.md
+              - reference/clanServices/borgbackup.md
+              - reference/clanServices/data-mesher.md
+              - reference/clanServices/emergency-access.md
+              - reference/clanServices/garage.md
+              - reference/clanServices/hello-world.md
+              - reference/clanServices/importer.md
+              - reference/clanServices/mycelium.md
+              - reference/clanServices/packages.md
+              - reference/clanServices/sshd.md
+              - reference/clanServices/state-version.md
+              - reference/clanServices/trusted-nix-caches.md
+              - reference/clanServices/users.md
+              - reference/clanServices/wifi.md
+              - reference/clanServices/zerotier.md
+          - API: reference/clanServices/clan-service-author-interface.md
+          - Writing a Service Module: developer/extensions/clanServices/index.md
       - Modules:
-          - Overview: reference/clanModules/index.md
-          - reference/clanModules/frontmatter/index.md
-          # TODO: display the docs of the clan.service modules
-          - reference/clanModules/admin.md
-          # This is the module overview and should stay at the top
-          - reference/clanModules/borgbackup-static.md
-          - reference/clanModules/data-mesher.md
-          - reference/clanModules/borgbackup.md
-          - reference/clanModules/deltachat.md
-          - reference/clanModules/disk-id.md
-          - reference/clanModules/dyndns.md
-          - reference/clanModules/ergochat.md
-          - reference/clanModules/garage.md
-          - reference/clanModules/heisenbridge.md
-          - reference/clanModules/importer.md
-          - reference/clanModules/iwd.md
-          - reference/clanModules/localbackup.md
-          - reference/clanModules/localsend.md
-          - reference/clanModules/matrix-synapse.md
-          - reference/clanModules/moonlight.md
-          - reference/clanModules/mumble.md
-          - reference/clanModules/mycelium.md
-          - reference/clanModules/nginx.md
-          - reference/clanModules/packages.md
-          - reference/clanModules/postgresql.md
-          - reference/clanModules/root-password.md
-          - reference/clanModules/single-disk.md
-          - reference/clanModules/sshd.md
-          - reference/clanModules/state-version.md
-          - reference/clanModules/static-hosts.md
-          - reference/clanModules/sunshine.md
-          - reference/clanModules/syncthing-static-peers.md
-          - reference/clanModules/syncthing.md
-          - reference/clanModules/thelounge.md
-          - reference/clanModules/trusted-nix-caches.md
-          - reference/clanModules/user-password.md
-          - reference/clanModules/auto-upgrade.md
-          - reference/clanModules/vaultwarden.md
-          - reference/clanModules/xfce.md
-          - reference/clanModules/zerotier-static-peers.md
-          - reference/clanModules/zerotier.md
-          - reference/clanModules/zt-tcp-relay.md
+          - List:
+              - Overview: reference/clanModules/index.md
+              - reference/clanModules/frontmatter/index.md
+              # TODO: display the docs of the clan.service modules
+              - reference/clanModules/admin.md
+              # This is the module overview and should stay at the top
+              - reference/clanModules/borgbackup-static.md
+              - reference/clanModules/data-mesher.md
+              - reference/clanModules/borgbackup.md
+              - reference/clanModules/deltachat.md
+              - reference/clanModules/disk-id.md
+              - reference/clanModules/dyndns.md
+              - reference/clanModules/ergochat.md
+              - reference/clanModules/garage.md
+              - reference/clanModules/heisenbridge.md
+              - reference/clanModules/importer.md
+              - reference/clanModules/iwd.md
+              - reference/clanModules/localbackup.md
+              - reference/clanModules/localsend.md
+              - reference/clanModules/matrix-synapse.md
+              - reference/clanModules/moonlight.md
+              - reference/clanModules/mumble.md
+              - reference/clanModules/mycelium.md
+              - reference/clanModules/nginx.md
+              - reference/clanModules/packages.md
+              - reference/clanModules/postgresql.md
+              - reference/clanModules/root-password.md
+              - reference/clanModules/single-disk.md
+              - reference/clanModules/sshd.md
+              - reference/clanModules/state-version.md
+              - reference/clanModules/static-hosts.md
+              - reference/clanModules/sunshine.md
+              - reference/clanModules/syncthing-static-peers.md
+              - reference/clanModules/syncthing.md
+              - reference/clanModules/thelounge.md
+              - reference/clanModules/trusted-nix-caches.md
+              - reference/clanModules/user-password.md
+              - reference/clanModules/auto-upgrade.md
+              - reference/clanModules/vaultwarden.md
+              - reference/clanModules/xfce.md
+              - reference/clanModules/zerotier-static-peers.md
+              - reference/clanModules/zerotier.md
+              - reference/clanModules/zt-tcp-relay.md
+          - Writing a Clan Module: developer/extensions/clanModules/index.md
+
+      - Nix API:
+          - inputs.clan-core.lib.clan: reference/nix-api/clan.md
+          - config.clan.core:
+              - Overview: reference/clan.core/index.md
+              - reference/clan.core/backups.md
+              - reference/clan.core/deployment.md
+              - reference/clan.core/facts.md
+              - reference/clan.core/networking.md
+              - reference/clan.core/settings.md
+              - reference/clan.core/sops.md
+              - reference/clan.core/state.md
+              - reference/clan.core/vars.md
+          - Inventory: reference/nix-api/inventory.md
       - CLI:
           - Overview: reference/cli/index.md
 
@@ -161,21 +170,7 @@ nav:
           - reference/cli/templates.md
           - reference/cli/vars.md
           - reference/cli/vms.md
-      - NixOS Modules:
-          - clan.core:
-              - Overview: reference/clan.core/index.md
 
-              - reference/clan.core/backups.md
-              - reference/clan.core/deployment.md
-              - reference/clan.core/facts.md
-              - reference/clan.core/networking.md
-              - reference/clan.core/settings.md
-              - reference/clan.core/sops.md
-              - reference/clan.core/state.md
-              - reference/clan.core/vars.md
-      - Nix API:
-          - clan: reference/nix-api/clan.md
-          - Inventory: reference/nix-api/inventory.md
       - Glossary: reference/glossary.md
       - Decisions:
           - Architecture Decisions: decisions/README.md
@@ -187,8 +182,14 @@ nav:
           - Template: decisions/_template.md
   - Options: options.md
   - Developer:
-      - Introduction: intern/index.md
-      - API: intern/api.md
+      - Introduction: developer/index.md
+      - Dev Setup: developer/contributing/CONTRIBUTING.md
+      - Writing a Service Module: developer/extensions/clanServices/index.md
+      - Writing a Clan Module: developer/extensions/clanModules/index.md
+      - Writing a Disko Template: developer/extensions/templates/disk/disko-templates.md
+      - Debugging: developer/contributing/debugging.md
+      - Testing: developer/contributing/testing.md
+      - Python API: developer/api.md
 
 docs_dir: site
 site_dir: out
@@ -246,3 +247,6 @@ plugins:
   - search
   - macros
   - redoc-tag
+  - redirects:
+      redirect_maps:
+        guides/getting-started/secrets.md: guides/vars-backend.md

docs/nix/default.nix

@@ -40,6 +40,7 @@ pkgs.stdenv.mkDerivation {
       mkdocs-material
       mkdocs-macros
       mkdocs-redoc-tag
+      mkdocs-redirects
     ]);
   configurePhase = ''
     pushd docs

docs/nix/options/flake-module.nix

@@ -114,9 +114,6 @@
         in
         {
           options = {
-            _ = mkOption {
-              type = types.raw;
-            };
             instances.${name} = lib.mkOption {
               inherit description;
               type = types.submodule {
@@ -149,20 +146,29 @@
           };
         };
 
-      mkScope = name: modules: {
-        inherit name;
-        modules = [
-          {
-            _module.args = { inherit clanLib; };
-            _file = "docs mkScope";
-          }
-          { noInstanceOptions = true; }
-          ../../../lib/modules/inventoryClass/interface.nix
-        ] ++ mapAttrsToList fakeInstanceOptions modules;
-        urlPrefix = "https://github.com/nix-community/dream2nix/blob/main/";
-      };
+      docModules = [
+        {
+          inherit self;
+        }
+        self.modules.clan.default
+        {
+          options.inventory = lib.mkOption {
+            type = types.submoduleWith {
+              modules = [
+                { noInstanceOptions = true; }
+              ] ++ mapAttrsToList fakeInstanceOptions serviceModules;
+            };
+          };
+        }
+      ];
+
     in
     {
+      # Uncomment for debugging
+      # legacyPackages.docModules = lib.evalModules {
+      #   modules = docModules;
+      # };
+
       packages = lib.optionalAttrs ((privateInputs ? nuschtos) || (inputs ? nuschtos)) {
         docs-options =
           (privateInputs.nuschtos or inputs.nuschtos)
@@ -171,7 +177,13 @@
               inherit baseHref;
               title = "Clan Options";
               # scopes = mapAttrsToList mkScope serviceModules;
-              scopes = [ (mkScope "Clan Inventory" serviceModules) ];
+              scopes = [
+                {
+                  name = "Clan";
+                  modules = docModules;
+                  urlPrefix = "https://git.clan.lol/clan/clan-core/src/branch/main/";
+                }
+              ];
             };
       };
     };

docs/nix/render_options/__init__.py

@@ -465,6 +465,10 @@ Learn how to use `clanServices` in practice in the [Using clanServices guide](..
         service_links: dict[str, dict[str, dict[str, Any]]] = json.load(f3)
 
     for module_name, module_info in service_links.items():
+        # Skip specific modules that are not ready for documentation
+        if module_name in ["internet", "tor"]:
+            continue
+
         output = f"# {module_name}\n\n"
         # output += f"`clan.modules.{module_name}`\n"
         output += f"*{module_info['manifest']['description']}*\n"
@@ -801,7 +805,7 @@ Typically needed by module authors to define roles, behavior and metadata for di
 !!! Note
     This is not a user-facing documentation, but rather meant as a reference for *module authors*
 
-    See: [clanService Authoring Guide](../../guides/authoring/clanServices/index.md)
+    See: [clanService Authoring Guide](../../developer/extensions/clanServices/index.md)
 """
     # Inventory options are already included under the clan attribute
     # We just omitted them in the clan docs, because we want a separate output for the inventory model

docs/site/developer/contributing/debugging.md

@@ -55,9 +55,37 @@ If you're using VSCode, it has a handy feature that makes paths to source code f
 
 ## Finding Print Messages
 
-To identify where a specific print message comes from, you can enable a helpful feature. Simply set the environment variable `export TRACE_PRINT=1`. When you run commands with `--debug` mode, each print message will include information about its source location.
+To trace the origin of print messages in `clan-cli`, you can enable special debugging features using environment variables:
+
+- Set `TRACE_PRINT=1` to include the source location with each print message:
+    ```bash
+    export TRACE_PRINT=1
+    ```
+    When running commands with `--debug`, every print will show where it was triggered in the code.
+
+- To see a deeper stack trace for each print, set `TRACE_DEPTH` to the desired number of stack frames (e.g., 3):
+    ```bash
+    export TRACE_DEPTH=3
+    ```
+
+### Additional Debug Logging
+
+You can enable more detailed logging for specific components by setting these environment variables:
+
+- `CLAN_DEBUG_NIX_SELECTORS=1` — verbose logs for flake.select operations
+- `CLAN_DEBUG_NIX_PREFETCH=1` — verbose logs for flake.prefetch operations
+- `CLAN_DEBUG_COMMANDS=1` — print the diffed environment of executed commands
+
+Example:
+```bash
+export CLAN_DEBUG_NIX_SELECTORS=1
+export CLAN_DEBUG_NIX_PREFETCH=1
+export CLAN_DEBUG_COMMANDS=1
+```
+
+These options help you pinpoint the source and context of print messages and debug logs during development.
+
 
-If you need more details, you can expand the stack trace information that appears with each print by setting the environment variable `export TRACE_DEPTH=3`.
 
 ## Analyzing Performance
 

docs/site/developer/extensions/clanServices/index.md

@@ -267,5 +267,5 @@ The benefit of this approach is that downstream users can override the value of
 ## Further
 
 - [Reference Documentation for Service Authors](../../../reference/clanServices/clan-service-author-interface.md)
-- [Migration Guide from ClanModules to ClanServices](../../migrations/migrate-inventory-services.md)
+- [Migration Guide from ClanModules to ClanServices](../../../guides/migrations/migrate-inventory-services.md)
 - [Decision that lead to ClanServices](../../../decisions/01-ClanModules.md)

docs/site/guides/age-plugins.md

@@ -0,0 +1,59 @@
+## Using Age Plugins
+
+If you wish to use a key generated using an [age plugin] as your admin key, extra care is needed.
+
+You must **precede your secret key with a comment that contains its corresponding recipient**.
+
+This is usually output as part of the generation process
+and is only required because there is no unified mechanism for recovering a recipient from a plugin secret key.
+
+Here is an example:
+
+```title="~/.config/sops/age/keys.txt"
+# public key: age1zdy49ek6z60q9r34vf5mmzkx6u43pr9haqdh5lqdg7fh5tpwlfwqea356l
+AGE-PLUGIN-FIDO2-HMAC-1QQPQZRFR7ZZ2WCV...
+```
+
+!!! note
+    The comment that precedes the plugin secret key need only contain the recipient.
+    Any other text is ignored.
+
+    In the example above, you can specify `# recipient: age1zdy...`, `# public: age1zdy....` or even
+    just `# age1zdy....`
+
+You will need to add an entry into your `flake.nix` to ensure that the necessary `age` plugins
+are loaded when using Clan:
+
+```nix title="flake.nix"
+{
+  inputs.clan-core.url = "https://git.clan.lol/clan/clan-core/archive/main.tar.gz";
+  inputs.nixpkgs.follows = "clan-core/nixpkgs";
+
+  outputs =
+    { self, clan-core, ... }:
+    let
+      # Sometimes this attribute set is defined in clan.nix
+      clan = clan-core.lib.clan {
+        inherit self;
+
+        meta.name = "myclan";
+
+        # Add Yubikey and FIDO2 HMAC plugins
+        # Note: the plugins listed here must be available in nixpkgs.
+        secrets.age.plugins = [
+          "age-plugin-yubikey"
+          "age-plugin-fido2-hmac"
+        ];
+
+        machines = {
+          # elided for brevity
+        };
+      };
+    in
+    {
+      inherit (clan) nixosConfigurations nixosModules clanInternals;
+
+      # elided for brevity
+    };
+}
+```

docs/site/guides/clanServices.md

@@ -138,7 +138,7 @@ You can use services exposed by Clan’s core module library, `clan-core`.
 
 You can also author your own `clanService` modules.
 
-🔗 Learn how to write your own service: [Authoring a clanService](../guides/authoring/clanServices/index.md)
+🔗 Learn how to write your own service: [Authoring a clanService](../developer/extensions/clanServices/index.md)
 
 You might expose your service module from your flake — this makes it easy for other people to also use your module in their clan.
 
@@ -154,6 +154,6 @@ You might expose your service module from your flake — this makes it easy for
 
 ## What’s Next?
 
-* [Author your own clanService →](../guides/authoring/clanServices/index.md)
+* [Author your own clanService →](../developer/extensions/clanServices/index.md)
 * [Migrate from clanModules →](../guides/migrations/migrate-inventory-services.md)
 <!-- TODO: * [Understand the architecture →](../explanation/clan-architecture.md) -->

docs/site/guides/getting-started/add-services.md

@@ -41,7 +41,7 @@ To learn more: [Guide about clanService](../clanServices.md)
 ```
 
 1. See [reference/clanServices](../../reference/clanServices/index.md) for all available services and how to configure them.
-   Or read [authoring/clanServices](../authoring/clanServices/index.md) if you want to bring your own
+   Or read [authoring/clanServices](../../developer/extensions/clanServices/index.md) if you want to bring your own
 
 2. Replace `__YOUR_CONTROLLER_` with the *name* of your machine.
 

docs/site/guides/getting-started/add-user.md

@@ -57,7 +57,7 @@ For more information see [clanService/users](../../reference/clanServices/users.
 
 Some people like to define a `users` folder in their repository root.
 That allows to bind all user specific logic to a single place (`default.nix`)
-Which can be imported into individual machines to make the user avilable on that machine.
+Which can be imported into individual machines to make the user available on that machine.
 
 ```bash
 .
@@ -107,7 +107,7 @@ We can use this property of clan services to bind a nixosModule to the user, whi
 }
 ```
 
-1. Type `path` or `string`: Must point to a seperate file. Inlining a module is not possible
+1. Type `path` or `string`: Must point to a separate file. Inlining a module is not possible
 
 !!! Note "This is inspiration"
     Our community might come up with better solutions soon.

docs/site/guides/getting-started/deploy.md

@@ -8,7 +8,6 @@ Now that you have created a machines, added some services and setup secrets. Thi
     - [x] RAM > 2GB
     - [x] **Two Computers**: You need one computer that you're getting ready (we'll call this the Target Computer) and another one to set it up from (we'll call this the Setup Computer). Make sure both can talk to each other over the network using SSH.
     - [x] **Machine configuration**: See our basic [adding and configuring machine guide](./add-machines.md)
-    - [x] **Initialized secrets**: See [secrets](secrets.md) for how to initialize your secrets.
 
 ## Physical Hardware
 
@@ -18,7 +17,7 @@ Steps:
 
 - Create a NixOS installer image and transfer it to a bootable USB drive as described in the [installer](./installer.md).
 - Boot the target machine and connect it to a network that makes it reachable from your setup computer.
-- Note down a reachable ip adress (*ipv4*, *ipv6* or *tor*)
+- Note down a reachable ip address (*ipv4*, *ipv6* or *tor*)
 
 ---
 
@@ -169,7 +168,7 @@ Re-run the command with the correct disk:
 clan templates apply disk single-disk jon --set mainDisk "/dev/disk/by-id/nvme-WD_PC_SN740_SDDQNQD-512G-1201_232557804368"
 ```
 
-Should now be succesfull
+Should now be successful
 
 ```shellSession
 Applied disk template 'single-disk' to machine 'jon'
@@ -181,6 +180,13 @@ You can have a look and customize it if needed.
 !!! tip
     For advanced partitioning, see [Disko templates](https://github.com/nix-community/disko-templates) or [Disko examples](https://github.com/nix-community/disko/tree/master/example).
 
+!!! Danger
+    Don't change the `disko.nix` after the machine is installed for the first time.
+
+    Changing disko configuration requires wiping and reinstalling the machine.
+
+    Unless you really know what you are doing.
+
 ## Deploy the machine
 
 **Finally deployment time!** Use one of the following commands to build and deploy the image via SSH onto your machine.
@@ -267,4 +273,3 @@ clan {
 ```
 
 This is useful for machines that are not always online or are not part of the regular update cycle.
-

docs/site/guides/getting-started/index.md

@@ -59,7 +59,7 @@ Enter a *name*, confirm with *enter*. A directory with that name will be created
 
 ## Explore the Project Structure
 
-Take a lookg at all project files:
+Take a look at all project files:
 
 ```bash
 cd my-clan
@@ -125,11 +125,10 @@ To change the name of your clan edit `meta.name` in the `clan.nix` or `flake.nix
 You can continue with **any** of the following steps at your own pace:
 
 - [x] [Install Nix & Clan CLI](./index.md)
-- [x] [Initialize Clan](./index.md#initialize-your-project)
+- [x] [Initialize Clan](./index.md#add-clan-cli-to-your-shell)
 - [ ] [Create USB Installer (optional)](./installer.md)
 - [ ] [Add Machines](./add-machines.md)
 - [ ] [Add a User](./add-user.md)
 - [ ] [Add Services](./add-services.md)
-- [ ] [Configure Secrets](./secrets.md)
 - [ ] [Deploy](./deploy.md) - Requires configured secrets
 - [ ] [Setup CI (optional)](./check.md)

docs/site/guides/getting-started/secrets.md

@@ -1,179 +0,0 @@
-
-Setting up secrets is **Required** for any *machine deployments* or *vm runs* - You need to complete the steps: [Create Admin Keypair](#create-your-admin-keypair) and [Add Your Public Key(s)](#add-your-public-keys)
-
----
-
-Clan enables encryption of secrets (such as passwords & keys) ensuring security and ease-of-use among users.
-
-By default, Clan uses the [sops](https://github.com/getsops/sops) format
-and integrates with [sops-nix](https://github.com/Mic92/sops-nix) on NixOS machines.
-Clan can also be configured to be used with other secret store [backends](../../reference/clan.core/vars.md#clan.core.vars.settings.secretStore).
-
-This guide will walk you through:
-
-- **Creating a Keypair for Your User**: Learn how to generate a keypair for `$USER` to securely control all secrets.
-- **Creating Your First Secret**: Step-by-step instructions on creating your initial secret.
-- **Assigning Machine Access to the Secret**: Understand how to grant a machine access to the newly created secret.
-
-## Create Your Admin Keypair
-
-To get started, you'll need to create **your admin keypair**.
-
-!!! info
-    Don't worry — if you've already made one before, this step won't change or overwrite it.
-
-```bash
-clan secrets key generate
-```
-
-**Output**:
-
-```{.console, .no-copy}
-Public key: age1wkth7uhpkl555g40t8hjsysr20drq286netu8zptw50lmqz7j95sw2t3l7
-
-Generated age private key at '/home/joerg/.config/sops/age/keys.txt' for your user. Please back it up on a secure location or you will lose access to your secrets.
-Also add your age public key to the repository with 'clan secrets users add YOUR_USER age1wkth7uhpkl555g40t8hjsysr20drq286netu8zptw50lmqz7j95sw2t3l7' (replace YOUR_USER with your actual username)
-```
-
-!!! warning
-    Make sure to keep a safe backup of the private key you've just created.
-    If it's lost, you won't be able to get to your secrets anymore because they all need the admin key to be unlocked.
-
-If you already have an [age] secret key and want to use that instead, you can simply edit `~/.config/sops/age/keys.txt`:
-
-```title="~/.config/sops/age/keys.txt"
-AGE-SECRET-KEY-13GWMK0KNNKXPTJ8KQ9LPSQZU7G3KU8LZDW474NX3D956GGVFAZRQTAE3F4
-```
-
-Alternatively, you can provide your [age] secret key as an environment variable `SOPS_AGE_KEY`, or in a different file
-using `SOPS_AGE_KEY_FILE`.
-For more information see the [SOPS] guide on [encrypting with age].
-
-!!! note
-    It's safe to add any secrets created by the clan CLI and placed in your repository to version control systems like `git`.
-
-### Add Your Public Key(s)
-
-```console
-clan secrets users add $USER --age-key <your_public_key>
-```
-
-It's best to choose the same username as on your Setup/Admin Machine that you use to control the deployment with.
-
-Once run this will create the following files:
-
-```{.console, .no-copy}
-sops/
-└── users/
-    └── <your_username>/
-        └── key.json
-```
-If you followed the quickstart tutorial all necessary secrets are initialized at this point.
-
-!!! note
-    You can add multiple age keys for a user by providing multiple `--age-key <your_public_key>` flags:
-
-    ```console
-    clan secrets users add $USER \
-        --age-key <your_public_key_1> \
-        --age-key <your_public_key_2> \
-        ...
-    ```
-
-### Manage Your Public Key(s)
-
-You can list keys for your user with `clan secrets users get $USER`:
-
-```console
-clan secrets users get alice
-
-[
-  {
-    "publickey": "age1hrrcspp645qtlj29krjpq66pqg990ejaq0djcms6y6evnmgglv5sq0gewu",
-    "type": "age",
-    "username": "alice"
-  },
-  {
-    "publickey": "age13kh4083t3g4x3ktr52nav6h7sy8ynrnky2x58pyp96c5s5nvqytqgmrt79",
-    "type": "age",
-    "username": "alice"
-  }
-]
-```
-
-To add a new key to your user:
-
-```console
-clan secrets users add-key $USER --age-key <your_public_key>
-```
-
-To remove a key from your user:
-
-```console
-clan secrets users remove-key $USER --age-key <your_public_key>
-```
-
-[age]: https://github.com/FiloSottile/age
-[age plugin]: https://github.com/FiloSottile/awesome-age?tab=readme-ov-file#plugins
-[sops]: https://github.com/getsops/sops
-[encrypting with age]: https://github.com/getsops/sops?tab=readme-ov-file#encrypting-using-age
-
-## Further: Using Age Plugins
-
-If you wish to use a key generated using an [age plugin] as your admin key, extra care is needed.
-
-You must **precede your secret key with a comment that contains its corresponding recipient**.
-
-This is usually output as part of the generation process
-and is only required because there is no unified mechanism for recovering a recipient from a plugin secret key.
-
-Here is an example:
-
-```title="~/.config/sops/age/keys.txt"
-# public key: age1zdy49ek6z60q9r34vf5mmzkx6u43pr9haqdh5lqdg7fh5tpwlfwqea356l
-AGE-PLUGIN-FIDO2-HMAC-1QQPQZRFR7ZZ2WCV...
-```
-
-!!! note
-    The comment that precedes the plugin secret key need only contain the recipient.
-    Any other text is ignored.
-
-    In the example above, you can specify `# recipient: age1zdy...`, `# public: age1zdy....` or even
-    just `# age1zdy....`
-
-You will need to add an entry into your `flake.nix` to ensure that the necessary `age` plugins
-are loaded when using Clan:
-
-```nix title="flake.nix"
-{
-  inputs.clan-core.url = "https://git.clan.lol/clan/clan-core/archive/main.tar.gz";
-  inputs.nixpkgs.follows = "clan-core/nixpkgs";
-
-  outputs =
-    { self, clan-core, ... }:
-    let
-      # Sometimes this attribute set is defined in clan.nix
-      clan = clan-core.lib.clan {
-        inherit self;
-
-        meta.name = "myclan";
-
-        # Add Yubikey and FIDO2 HMAC plugins
-        # Note: the plugins listed here must be available in nixpkgs.
-        secrets.age.plugins = [
-          "age-plugin-yubikey"
-          "age-plugin-fido2-hmac"
-        ];
-
-        machines = {
-          # elided for brevity
-        };
-      };
-    in
-    {
-      inherit (clan) nixosConfigurations nixosModules clanInternals;
-
-      # elided for brevity
-    };
-}
-```

docs/site/guides/migrations/migrate-inventory-services.md

@@ -1,7 +1,7 @@
 # Migrating from using `clanModules` to `clanServices`
 
 **Audience**: This is a guide for **people using `clanModules`**.
-If you are a **module author** and need to migrate your modules please consult our **new** [clanServices authoring guide](../authoring/clanServices/index.md)
+If you are a **module author** and need to migrate your modules please consult our **new** [clanServices authoring guide](../../developer/extensions/clanServices/index.md)
 
 ## What's Changing?
 
@@ -35,6 +35,37 @@ services = {
 };
 ```
 
+### Complex Example: Multi-service Setup
+
+```nix
+# Old format
+services = {
+    borgbackup.production = {
+        roles.server.machines = [ "backup-server" ];
+        roles.server.config = {
+            directory = "/var/backup/borg";
+        };
+        roles.client.tags = [ "backup" ];
+        roles.client.extraModules = [ "nixosModules/borgbackup.nix" ];
+    };
+
+    zerotier.company-network = {
+        roles.controller.machines = [ "network-controller" ];
+        roles.moon.machines = [ "moon-1" "moon-2" ];
+        roles.peer.tags = [ "nixos" ];
+    };
+
+    sshd.internal = {
+        roles.server.tags = [ "nixos" ];
+        roles.client.tags = [ "nixos" ];
+        config.certificate.searchDomains = [
+            "internal.example.com"
+            "vpn.example.com"
+        ];
+    };
+};
+```
+
 ---
 
 ## ✅ After: New `instances` Definition with `clanServices`
@@ -70,6 +101,56 @@ instances = {
 };
 ```
 
+### Complex Example Migrated
+
+```nix
+# New format
+instances = {
+    borgbackup-production = {
+        module = {
+            name = "borgbackup";
+            input = "clan-core";
+        };
+        roles.server.machines."backup-server" = { };
+        roles.server.settings = {
+            directory = "/var/backup/borg";
+        };
+        roles.client.tags.backup = { };
+        roles.client.extraModules = [ ../nixosModules/borgbackup.nix ];
+    };
+
+    zerotier-company-network = {
+        module = {
+            name = "zerotier";
+            input = "clan-core";
+        };
+        roles.controller.machines."network-controller" = { };
+        roles.moon.machines."moon-1".settings = {
+            stableEndpoints = [ "10.0.0.1" "2001:db8::1" ];
+        };
+        roles.moon.machines."moon-2".settings = {
+            stableEndpoints = [ "10.0.0.2" "2001:db8::2" ];
+        };
+        roles.peer.tags.nixos = { };
+    };
+
+    sshd-internal = {
+        module = {
+            name = "sshd";
+            input = "clan-core";
+        };
+        roles.server.tags.nixos = { };
+        roles.client.tags.nixos = { };
+        roles.client.settings = {
+            certificate.searchDomains = [
+                "internal.example.com"
+                "vpn.example.com"
+            ];
+        };
+    };
+};
+```
+
 ---
 
 ## Steps to Migrate
@@ -131,6 +212,33 @@ roles.default.machines."test-inventory-machine".settings = {
 };
 ```
 
+### Important Type Changes
+
+The new `instances` format uses **attribute sets** instead of **lists** for tags and machines:
+
+```nix
+# ❌ Old format (lists)
+roles.client.tags = [ "backup" ];
+roles.server.machines = [ "blob64" ];
+
+# ✅ New format (attribute sets)
+roles.client.tags.backup = { };
+roles.server.machines.blob64 = { };
+```
+
+### Handling Multiple Machines/Tags
+
+When you need to assign multiple machines or tags to a role:
+
+```nix
+# ❌ Old format
+roles.moon.machines = [ "eva" "eve" ];
+
+# ✅ New format - each machine gets its own attribute
+roles.moon.machines.eva = { };
+roles.moon.machines.eve = { };
+```
+
 ---
 
 !!! Warning
@@ -138,8 +246,89 @@ roles.default.machines."test-inventory-machine".settings = {
     * `inventory.services` is no longer recommended; use `inventory.instances` instead.
     * Module authors should begin exporting service modules under the `clan.modules` attribute of their flake.
 
+## Troubleshooting Common Migration Errors
+
+### Error: "not of type `attribute set of (submodule)`"
+
+This error occurs when using lists instead of attribute sets for tags or machines:
+
+```
+error: A definition for option `flake.clan.inventory.instances.borgbackup-blob64.roles.client.tags' is not of type `attribute set of (submodule)'.
+```
+
+**Solution**: Convert lists to attribute sets as shown in the "Important Type Changes" section above.
+
+### Error: "unsupported attribute `module`"
+
+This error indicates the module structure is incorrect:
+
+```
+error: Module ':anon-4:anon-1' has an unsupported attribute `module'.
+```
+
+**Solution**: Ensure the `module` attribute has exactly two fields: `name` and `input`.
+
+### Error: "attribute 'pkgs' missing"
+
+This suggests the instance configuration is trying to use imports incorrectly:
+
+```
+error: attribute 'pkgs' missing
+```
+
+**Solution**: Use the `module = { name = "..."; input = "..."; }` format instead of `imports`.
+
+### Removed Features
+
+The following features from the old `services` format are no longer supported in `instances`:
+
+- Top-level `config` attribute (use `roles.<role>.settings` instead)
+- Direct module imports (use the `module` declaration instead)
+
+### extraModules Support
+
+The `extraModules` attribute is still supported in the new instances format! The key change is how modules are specified:
+
+**Old format (string paths relative to clan root):**
+```nix
+roles.client.extraModules = [ "nixosModules/borgbackup.nix" ];
+```
+
+**New format (NixOS modules):**
+```nix
+# Direct module reference
+roles.client.extraModules = [ ../nixosModules/borgbackup.nix ];
+
+# Or using self
+roles.client.extraModules = [ self.nixosModules.borgbackup ];
+
+# Or inline module definition
+roles.client.extraModules = [
+  { config, ... }: {
+    # Your module configuration here
+  }
+];
+```
+
+The `extraModules` now expects actual **NixOS modules** rather than string paths. This provides better type checking and more flexibility in how modules are specified.
+
+**Alternative: Using @clan/importer**
+
+For scenarios where you need to import modules with specific tag-based targeting, you can also use the dedicated `@clan/importer` service:
+
+```nix
+instances = {
+  my-importer = {
+    module.name = "@clan/importer";
+    module.input = "clan-core";
+    roles.default.tags.my-tag = { };
+    roles.default.extraModules = [ self.nixosModules.myModule ];
+  };
+};
+```
+
 ## Further reference
 
-* [Authoring a 'clan.service' module](../authoring/clanServices/index.md)
+* [Authoring a 'clan.service' module](../../developer/extensions/clanServices/index.md)
 * [ClanServices](../clanServices.md)
-* [Inventory Reference](../../reference/nix-api/inventory.md)
+* [Inventory Reference](../../reference/nix-api/inventory.md)

docs/site/guides/secrets.md

@@ -1,25 +1,141 @@
-If you want to know more about how to save and share passwords in your clan read further!
+This article provides an overview over the underlying secrets system which is used by [Vars](../guides/vars-backend.md).
+Under most circumstances you should use [Vars](../guides/vars-backend.md) directly instead.
 
-### Adding a Secret
+Consider using `clan secrets` only for managing admin users and groups, as well as a debugging tool.
+
+Manually interacting with secrets via `clan secrets [set|remove]`, etc may break the integrity of your `Vars` state.
+
+---
+
+Clan enables encryption of secrets (such as passwords & keys) ensuring security and ease-of-use among users.
+
+By default, Clan uses the [sops](https://github.com/getsops/sops) format
+and integrates with [sops-nix](https://github.com/Mic92/sops-nix) on NixOS machines.
+Clan can also be configured to be used with other secret store [backends](../reference/clan.core/vars.md#clan.core.vars.settings.secretStore).
+
+## Create Your Admin Keypair
+
+To get started, you'll need to create **your admin keypair**.
+
+!!! info
+    Don't worry — if you've already made one before, this step won't change or overwrite it.
+
+```bash
+clan secrets key generate
+```
+
+**Output**:
+
+```{.console, .no-copy}
+Public key: age1wkth7uhpkl555g40t8hjsysr20drq286netu8zptw50lmqz7j95sw2t3l7
+
+Generated age private key at '/home/joerg/.config/sops/age/keys.txt' for your user. Please back it up on a secure location or you will lose access to your secrets.
+Also add your age public key to the repository with 'clan secrets users add YOUR_USER age1wkth7uhpkl555g40t8hjsysr20drq286netu8zptw50lmqz7j95sw2t3l7' (replace YOUR_USER with your actual username)
+```
+
+!!! warning
+    Make sure to keep a safe backup of the private key you've just created.
+    If it's lost, you won't be able to get to your secrets anymore because they all need the admin key to be unlocked.
+
+If you already have an [age] secret key and want to use that instead, you can simply edit `~/.config/sops/age/keys.txt`:
+
+```title="~/.config/sops/age/keys.txt"
+AGE-SECRET-KEY-13GWMK0KNNKXPTJ8KQ9LPSQZU7G3KU8LZDW474NX3D956GGVFAZRQTAE3F4
+```
+
+Alternatively, you can provide your [age] secret key as an environment variable `SOPS_AGE_KEY`, or in a different file
+using `SOPS_AGE_KEY_FILE`.
+For more information see the [SOPS] guide on [encrypting with age].
+
+!!! note
+    It's safe to add any secrets created by the clan CLI and placed in your repository to version control systems like `git`.
+
+## Add Your Public Key(s)
+
+```console
+clan secrets users add $USER --age-key <your_public_key>
+```
+
+It's best to choose the same username as on your Setup/Admin Machine that you use to control the deployment with.
+
+Once run this will create the following files:
+
+```{.console, .no-copy}
+sops/
+└── users/
+    └── <your_username>/
+        └── key.json
+```
+If you followed the quickstart tutorial all necessary secrets are initialized at this point.
+
+!!! note
+    You can add multiple age keys for a user by providing multiple `--age-key <your_public_key>` flags:
+
+    ```console
+    clan secrets users add $USER \
+        --age-key <your_public_key_1> \
+        --age-key <your_public_key_2> \
+        ...
+    ```
+
+## Manage Your Public Key(s)
+
+You can list keys for your user with `clan secrets users get $USER`:
+
+```console
+clan secrets users get alice
+
+[
+  {
+    "publickey": "age1hrrcspp645qtlj29krjpq66pqg990ejaq0djcms6y6evnmgglv5sq0gewu",
+    "type": "age",
+    "username": "alice"
+  },
+  {
+    "publickey": "age13kh4083t3g4x3ktr52nav6h7sy8ynrnky2x58pyp96c5s5nvqytqgmrt79",
+    "type": "age",
+    "username": "alice"
+  }
+]
+```
+
+To add a new key to your user:
+
+```console
+clan secrets users add-key $USER --age-key <your_public_key>
+```
+
+To remove a key from your user:
+
+```console
+clan secrets users remove-key $USER --age-key <your_public_key>
+```
+
+[age]: https://github.com/FiloSottile/age
+[age plugin]: https://github.com/FiloSottile/awesome-age?tab=readme-ov-file#plugins
+[sops]: https://github.com/getsops/sops
+[encrypting with age]: https://github.com/getsops/sops?tab=readme-ov-file#encrypting-using-age
+
+## Adding a Secret
 
 ```shellSession
 clan secrets set mysecret
 Paste your secret:
 ```
 
-### Retrieving a Stored Secret
+## Retrieving a Stored Secret
 
 ```bash
 clan secrets get mysecret
 ```
 
-### List all Secrets
+## List all Secrets
 
 ```bash
 clan secrets list
 ```
 
-### NixOS integration
+## NixOS integration
 
 A NixOS machine will automatically import all secrets that are encrypted for the
 current machine. At runtime it will use the host key to decrypt all secrets into
@@ -37,7 +153,7 @@ In your nixos configuration you can get a path to secrets like this `config.sops
 }
 ```
 
-### Assigning Access
+## Assigning Access
 
 When using `clan secrets set <secret>` without arguments, secrets are encrypted for the key of the user named like your current $USER.
 

docs/site/index.md

@@ -4,7 +4,21 @@ hide:
   - toc
 ---
 
-# :material-home: Welcome to **Clan**'s  documentation
+# :material-home: What is Clan?
+
+[Clan](https://clan.lol/) is a peer-to-peer computer management framework that
+empowers you to reclaim control over your digital computing experience. Built on
+NixOS, Clan provides a unified interface for managing networks of machines with
+automated [secret management](./guides/secrets.md), secure [mesh VPN
+connectivity](./guides/mesh-vpn.md), and customizable installation images. Whether
+you're running a homelab or building decentralized computing infrastructure,
+Clan simplifies configuration management while restoring your independence from
+closed computing ecosystems.
+
+At the heart of Clan are [Clan Services](./reference/clanServices/index.md) - the core
+concept that enables you to add functionality across multiple machines in your
+network. While Clan ships with essential core services, you can [create custom
+services](./guides/clanServices.md) tailored to your specific needs.
 
 [Getting Started](./guides/getting-started/index.md){ .md-button }
 
@@ -38,7 +52,7 @@ hide:
 
     Use Clan with [https://flake.parts/]()
 
--   [Contribute](./guides/contributing/CONTRIBUTING.md)
+-   [Contribute](./developer/contributing/CONTRIBUTING.md)
 
     ---
 

docs/site/static/extra.css

@@ -2,6 +2,7 @@
   font-family: "Roboto";
   src: url(./Roboto-Regular.ttf) format("truetype");
 }
+
 @font-face {
   font-family: "Fira Code";
   src: url(./FiraCode-VF.ttf) format("truetype");
@@ -20,3 +21,9 @@
 .md-nav__item.md-nav__item--section > label > span {
   color: var(--md-typeset-a-color);
 }
+
+.md-typeset h4 {
+  margin: 3em 0 0.5em;
+  font-weight: bold;
+  color: #7ebae4;
+}

flake.lock

@@ -8,19 +8,16 @@
         "nixpkgs": [
           "nixpkgs"
         ],
-        "systems": [
-          "systems"
-        ],
         "treefmt-nix": [
           "treefmt-nix"
         ]
       },
       "locked": {
-        "lastModified": 1751846468,
-        "narHash": "sha256-h0mpWZIOIAKj4fmLNyI2HDG+c0YOkbYmyJXSj/bQ9s0=",
-        "rev": "a2166c13b0cb3febdaf36391cd2019aa2ccf4366",
+        "lastModified": 1753067306,
+        "narHash": "sha256-jyoEbaXa8/MwVQ+PajUdT63y3gYhgD9o7snO/SLaikw=",
+        "rev": "18dfd42bdb2cfff510b8c74206005f733e38d8b9",
         "type": "tarball",
-        "url": "https://git.clan.lol/api/v1/repos/clan/data-mesher/archive/a2166c13b0cb3febdaf36391cd2019aa2ccf4366.tar.gz"
+        "url": "https://git.clan.lol/api/v1/repos/clan/data-mesher/archive/18dfd42bdb2cfff510b8c74206005f733e38d8b9.tar.gz"
       },
       "original": {
         "type": "tarball",
@@ -34,11 +31,11 @@
         ]
       },
       "locked": {
-        "lastModified": 1752113600,
-        "narHash": "sha256-7LYDxKxZgBQ8LZUuolAQ8UkIB+jb4A2UmiR+kzY9CLI=",
+        "lastModified": 1753140376,
+        "narHash": "sha256-7lrVrE0jSvZHrxEzvnfHFE/Wkk9DDqb+mYCodI5uuB8=",
         "owner": "nix-community",
         "repo": "disko",
-        "rev": "79264292b7e3482e5702932949de9cbb69fedf6d",
+        "rev": "545aba02960caa78a31bd9a8709a0ad4b6320a5c",
         "type": "github"
       },
       "original": {
@@ -54,11 +51,11 @@
         ]
       },
       "locked": {
-        "lastModified": 1751413152,
-        "narHash": "sha256-Tyw1RjYEsp5scoigs1384gIg6e0GoBVjms4aXFfRssQ=",
+        "lastModified": 1753121425,
+        "narHash": "sha256-TVcTNvOeWWk1DXljFxVRp+E0tzG1LhrVjOGGoMHuXio=",
         "owner": "hercules-ci",
         "repo": "flake-parts",
-        "rev": "77826244401ea9de6e3bac47c2db46005e1f30b5",
+        "rev": "644e0fc48951a860279da645ba77fe4a6e814c5e",
         "type": "github"
       },
       "original": {
@@ -118,10 +115,10 @@
     "nixpkgs": {
       "locked": {
         "lastModified": 315532800,
-        "narHash": "sha256-mUlYenGbsUFP0A3EhfKJXmUl5+MQGJLhoEop2t3g5p4=",
-        "rev": "ceb24d94c6feaa4e8737a8e2bd3cf71c3a7eaaa0",
+        "narHash": "sha256-lUi+sPH7Kuh9uP3PyfgbENcJGReUM8Ffk9GxGBFbSN8=",
+        "rev": "be9e214982e20b8310878ac2baa063a961c1bdf6",
         "type": "tarball",
-        "url": "https://releases.nixos.org/nixpkgs/nixpkgs-25.11pre826033.ceb24d94c6fe/nixexprs.tar.xz"
+        "url": "https://releases.nixos.org/nixpkgs/nixpkgs-25.11pre827262.be9e214982e2/nixexprs.tar.xz"
       },
       "original": {
         "type": "tarball",
@@ -149,11 +146,11 @@
         ]
       },
       "locked": {
-        "lastModified": 1751606940,
-        "narHash": "sha256-KrDPXobG7DFKTOteqdSVeL1bMVitDcy7otpVZWDE6MA=",
+        "lastModified": 1752544651,
+        "narHash": "sha256-GllP7cmQu7zLZTs9z0J2gIL42IZHa9CBEXwBY9szT0U=",
         "owner": "Mic92",
         "repo": "sops-nix",
-        "rev": "3633fc4acf03f43b260244d94c71e9e14a2f6e0d",
+        "rev": "2c8def626f54708a9c38a5861866660395bb3461",
         "type": "github"
       },
       "original": {
@@ -184,11 +181,11 @@
         ]
       },
       "locked": {
-        "lastModified": 1752055615,
-        "narHash": "sha256-19m7P4O/Aw/6+CzncWMAJu89JaKeMh3aMle1CNQSIwM=",
+        "lastModified": 1753006367,
+        "narHash": "sha256-tzbhc4XttkyEhswByk5R38l+ztN9UDbnj0cTcP6Hp9A=",
         "owner": "numtide",
         "repo": "treefmt-nix",
-        "rev": "c9d477b5d5bd7f26adddd3f96cfd6a904768d4f9",
+        "rev": "421b56313c65a0815a52b424777f55acf0b56ddf",
         "type": "github"
       },
       "original": {

flake.nix

@@ -30,7 +30,6 @@
       inputs = {
         flake-parts.follows = "flake-parts";
         nixpkgs.follows = "nixpkgs";
-        systems.follows = "systems";
         treefmt-nix.follows = "treefmt-nix";
       };
     };

lib/modules/clan/interface.nix

@@ -78,7 +78,87 @@ in
       internal = true;
       visible = false;
       type = types.deferredModule;
-      default = { };
+      default = {
+        options.networking = lib.mkOption {
+          default = null;
+          type = lib.types.nullOr (
+            lib.types.submodule {
+              options = {
+                priority = lib.mkOption {
+                  type = lib.types.int;
+                  default = 1000;
+                  description = ''
+                    priority with which this network should be tried.
+                    higher priority means it gets used earlier in the chain
+                  '';
+                };
+                module = lib.mkOption {
+                  # type = lib.types.enum [
+                  #   "clan_lib.network.direct"
+                  #   "clan_lib.network.tor"
+                  # ];
+                  type = lib.types.str;
+                  default = "clan_lib.network.direct";
+                  description = ''
+                    the technology this network uses to connect to the target
+                    This is used for userspace networking with socks proxies.
+                  '';
+                };
+                # should we call this machines? hosts?
+                peers = lib.mkOption {
+                  # <name>
+                  type = lib.types.attrsOf (
+                    lib.types.submodule (
+                      { name, ... }:
+                      {
+                        options = {
+                          name = lib.mkOption {
+                            type = lib.types.str;
+                            default = name;
+                          };
+                          SSHOptions = lib.mkOption {
+                            type = lib.types.listOf lib.types.str;
+                            default = [ ];
+                          };
+                          host = lib.mkOption {
+                            description = '''';
+                            type = lib.types.attrTag {
+                              plain = lib.mkOption {
+                                type = lib.types.str;
+                                description = ''
+                                  a plain value, which can be read directly from the config
+                                '';
+                              };
+                              var = lib.mkOption {
+                                type = lib.types.submodule {
+                                  options = {
+                                    machine = lib.mkOption {
+                                      type = lib.types.str;
+                                      example = "jon";
+                                    };
+                                    generator = lib.mkOption {
+                                      type = lib.types.str;
+                                      example = "tor-ssh";
+                                    };
+                                    file = lib.mkOption {
+                                      type = lib.types.str;
+                                      example = "hostname";
+                                    };
+                                  };
+                                };
+                              };
+                            };
+                          };
+                        };
+                      }
+                    )
+                  );
+                };
+              };
+            }
+          );
+        };
+      };
       description = ''
         A module that is used to define the module of flake level exports -
 
@@ -149,8 +229,8 @@ in
     };
 
     inventory = lib.mkOption {
-      type = types.submodule {
-        imports = [
+      type = types.submoduleWith {
+        modules = [
           {
             _module.args = { inherit clanLib; };
             _file = "clan interface";

lib/modules/clan/module.nix

@@ -101,19 +101,15 @@ let
       system:
       lib.nameValuePair system (
         lib.mapAttrs (
-          name: _:
-          moduleSystemConstructor.${machineClasses.${name}} {
+          _: machine:
+          machine.extendModules {
             modules = [
-              (config.outputs.moduleForMachine.${name} or { })
               (lib.modules.importApply ../machineModules/overridePkgs.nix {
                 pkgs = pkgsFor.${system};
               })
             ];
-            specialArgs = {
-              inherit clan-core;
-            } // specialArgs;
           }
-        ) allMachines
+        ) configurations
       )
     ) supportedSystems
   );
@@ -251,7 +247,7 @@ in
               {
                 distributedServices = clanLib.inventory.mapInstances {
                   inherit (clanConfig) inventory exportsModule;
-                  inherit flakeInputs;
+                  inherit flakeInputs directory;
                   clanCoreModules = clan-core.clan.modules;
                   prefix = [ "distributedServices" ];
                 };

lib/modules/default.nix

@@ -7,8 +7,29 @@
 }:
 rec {
   buildClan =
-    # TODO: Once all templates and docs are migrated add: lib.warn "'buildClan' is deprecated. Use 'clan-core.lib.clan' instead"
-    module: (clan module).config;
+    module:
+    lib.warn ''
+      ==================== DEPRECATION NOTICE ====================
+      Please migrate 
+      from: 'clan = inputs.<clan-core>.lib.buildClan' 
+      to  : 'clan = inputs.<clan-core>.lib.clan'
+      in your flake.nix.
+
+      Please also migrate
+      from: 'inherit (clan) nixosConfigurations clanInternals; '
+      to  : "
+              inherit (clan.config) nixosConfigurations clanInternals;
+              clan = clan.config;
+            "
+      in your flake.nix.
+
+      Reason: 
+      - Improves consistency between flake-parts and non-flake-parts users.
+              
+      - It also allows us to use the top level attribute 'clan' to expose
+        attributes that can be used for cross-clan functionality.
+      ============================================================
+    '' (clan module).config;
 
   clan =
     {

lib/modules/inventory/distributed-service/all-services-wrapper.nix

@@ -1,4 +1,8 @@
 # Wraps all services in one fixed point module
+{
+  # TODO: consume directly from clan.config
+  directory,
+}:
 {
   lib,
   config,
@@ -29,6 +33,8 @@ in
               {
                 _module.args._ctx = [ name ];
                 _module.args.exports' = config.exports;
+                _module.args.directory = directory;
+
               }
             )
             ./service-module.nix
@@ -48,6 +54,7 @@ in
           {
             options = {
               instances = lib.mkOption {
+                default = { };
                 # instances.<instanceName>...
                 type = types.attrsOf (submoduleWith {
                   modules = [
@@ -57,6 +64,7 @@ in
               };
               # instances.<machineName>...
               machines = lib.mkOption {
+                default = { };
                 type = types.attrsOf (submoduleWith {
                   modules = [
                     config.exportsModule
@@ -69,8 +77,5 @@ in
       };
       default = { };
     };
-    debug = mkOption {
-      default = lib.mapAttrsToList (_: service: service.exports) config.mappedServices;
-    };
   };
 }

lib/modules/inventory/distributed-service/inventory-adapter.nix

@@ -24,6 +24,7 @@ in
       flakeInputs,
       # The clan inventory
       inventory,
+      directory,
       clanCoreModules,
       prefix ? [ ],
       exportsModule,
@@ -128,7 +129,7 @@ in
             _ctx = prefix;
           };
           modules = [
-            ./all-services-wrapper.nix
+            (import ./all-services-wrapper.nix { inherit directory; })
           ] ++ modules;
         };
 

lib/modules/inventory/distributed-service/service-module.nix

@@ -2,6 +2,7 @@
   lib,
   config,
   _ctx,
+  directory,
   ...
 }:
 let
@@ -212,7 +213,7 @@ in
 
                           options.extraModules = lib.mkOption {
                             default = [ ];
-                            type = types.listOf (types.deferredModule);
+                            type = types.listOf (types.either types.deferredModule types.str);
                           };
                         })
                       ];
@@ -755,10 +756,14 @@ in
             instanceRes
             // {
               nixosModule = {
-                imports = [
-                  # Result of the applied 'perInstance = {...}: {  nixosModule = { ... }; }'
-                  instanceRes.nixosModule
-                ] ++ instanceCfg.roles.${roleName}.extraModules;
+                imports =
+                  [
+                    # Result of the applied 'perInstance = {...}: {  nixosModule = { ... }; }'
+                    instanceRes.nixosModule
+                  ]
+                  ++ (map (
+                    s: if builtins.typeOf s == "string" then "${directory}/${s}" else s
+                  ) instanceCfg.roles.${roleName}.extraModules);
               };
             }
 

lib/modules/inventory/distributed-service/tests/default.nix

@@ -45,6 +45,7 @@ let
       };
     in
     clanLib.inventory.mapInstances {
+      directory = ./.;
       clanCoreModules = { };
       flakeInputs = flakeInputsFixture;
       inherit inventory;
@@ -52,6 +53,7 @@ let
     };
 in
 {
+  extraModules = import ./extraModules.nix { inherit clanLib; };
   exports = import ./exports.nix { inherit lib clanLib; };
   resolve_module_spec = import ./import_module_spec.nix { inherit lib callInventoryAdapter; };
   test_simple =

lib/modules/inventory/distributed-service/tests/extraModules.nix

@@ -0,0 +1,33 @@
+{ clanLib }:
+let
+  clan = clanLib.clan {
+    self = { };
+    directory = ./.;
+
+    machines.jon = {
+      nixpkgs.hostPlatform = "x86_64-linux";
+
+    };
+    # A module that adds exports perMachine
+    modules.A = {
+      manifest.name = "A";
+      roles.peer = { };
+    };
+
+    inventory = {
+      instances.A = {
+        module.input = "self";
+        roles.peer.tags.all = { };
+
+        roles.peer.extraModules = [ ./oneOption.nix ];
+      };
+    };
+  };
+in
+{
+  test_1 = {
+    inherit clan;
+    expr = clan.config.nixosConfigurations.jon.config.testDebug;
+    expected = 42;
+  };
+}

lib/modules/inventory/distributed-service/tests/oneOption.nix

@@ -0,0 +1,6 @@
+{ lib, ... }:
+{
+  options.testDebug = lib.mkOption {
+    default = 42;
+  };
+}

lib/modules/inventoryClass/interface.nix

@@ -142,7 +142,7 @@ in
             - The module MUST have at least `features = [ "inventory" ]` in the frontmatter section.
             - The module MUST have a subfolder `roles` with at least one `{roleName}.nix` file.
 
-            For further information see: [Module Authoring Guide](../../guides/authoring/clanServices/index.md).
+            For further information see: [Module Authoring Guide](../../developer/extensions/clanServices/index.md).
 
         ???+ example
             ```nix
@@ -179,8 +179,8 @@ in
               map (m: "'${m}'") (lib.attrNames (lib.filterAttrs (n: _v: !builtins.elem n allowedNames) moduleSet))
             )}
 
-            See: https://docs.clan.lol/guides/clanServices/
-            And: https://docs.clan.lol/guides/authoring/clanServices/
+            See: https://docs.clan.lol/developer/extensions/clanServices/
+            And: https://docs.clan.lol/developer/extensions/clanServices/
           '' moduleSet;
     };
 

lib/test/container-test-driver/test_driver/__init__.py

@@ -313,6 +313,18 @@ class Machine:
         command = f"nc -z {shlex.quote(addr)} {port}"
         self.wait_until_succeeds(command, timeout=timeout)
 
+    def wait_for_file(self, filename: str, timeout: int = 30) -> None:
+        """
+        Waits until the file exists in the machine's file system.
+        """
+
+        def check_file(_last_try: bool) -> bool:
+            result = self.execute(f"test -e {filename}")
+            return result.returncode == 0
+
+        with self.nested(f"waiting for file '{filename}'"):
+            retry(check_file, timeout)
+
     def wait_for_unit(self, unit: str, timeout: int = 900) -> None:
         """
         Wait for a systemd unit to get into "active" state.
@@ -407,6 +419,14 @@ def setup_filesystems(container: ContainerInfo) -> None:
     Path("/etc/os-release").touch()
     Path("/etc/machine-id").write_text("a5ea3f98dedc0278b6f3cc8c37eeaeac")
     container.nix_store_dir.mkdir(parents=True)
+
+    # Recreate symlinks
+    for file in Path("/nix/store").iterdir():
+        if file.is_symlink():
+            target = file.readlink()
+            sym = container.nix_store_dir / file.name
+            os.symlink(target, sym)
+
     # Read /proc/mounts and replicate every bind mount
     with Path("/proc/self/mounts").open() as f:
         for line in f:

nixosModules/clanCore/vars/default.nix

@@ -26,6 +26,7 @@ in
     ++ lib.optionals (_class == "nixos") [
       ./secret/password-store.nix
     ];
+
   options.clan.core.vars = lib.mkOption {
     description = ''
       Generated Variables
@@ -36,7 +37,14 @@ in
         - generate secrets like private keys automatically when they are needed
         - output multiple values like private and public keys simultaneously
     '';
-    type = submodule { imports = [ ./interface.nix ]; };
+    type = submodule {
+      imports = [
+        ./interface.nix
+        {
+          settings.dependenciesType = lib.types.listOf lib.types.str;
+        }
+      ];
+    };
   };
 
   config = {

nixosModules/clanCore/vars/interface.nix

@@ -10,6 +10,9 @@ let
     hashString
     toJSON
     ;
+  inherit (lib)
+    mkOption
+    ;
   inherit (lib.types)
     attrsOf
     bool
@@ -22,20 +25,29 @@ let
     package
     path
     str
+    strMatching
     submoduleWith
     ;
   # the original types.submodule has strange behavior
   submodule =
     module:
     submoduleWith {
-      specialArgs.pkgs = pkgs;
       modules = [ module ];
     };
+
+  submoduleWithPkgs =
+    module:
+    submoduleWith {
+      modules = [
+        module
+        { config._module.args.pkgs = pkgs; }
+      ];
+    };
 in
 {
   options = {
     settings = import ./settings-opts.nix { inherit lib; };
-    generators = lib.mkOption {
+    generators = mkOption {
       description = ''
         A set of generators that can be used to generate files.
         Generators are scripts that produce files based on the values of other generators and user input.
@@ -43,11 +55,11 @@ in
       '';
       default = { };
       type = attrsOf (
-        submodule (generator: {
+        submoduleWithPkgs (generator: {
           imports = [ ./generator.nix ];
           options = {
-            name = lib.mkOption {
-              type = lib.types.str;
+            name = mkOption {
+              type = str;
               description = ''
                 The name of the generator.
                 This name will be used to refer to the generator in other generators.
@@ -56,8 +68,7 @@ in
               default = generator.config._module.args.name;
               defaultText = "Name of the generator";
             };
-
-            dependencies = lib.mkOption {
+            dependencies = mkOption {
               description = ''
                 A list of other generators that this generator depends on.
                 The output values of these generators will be available to the generator script as files.
@@ -66,10 +77,10 @@ in
 
                 **A file `file1` of a generator named `dep1` will be available via `$in/dep1/file1`**
               '';
-              type = listOf str;
+              type = config.settings.dependenciesType;
               default = [ ];
             };
-            migrateFact = lib.mkOption {
+            migrateFact = mkOption {
               description = ''
                 The fact service name to import the files from.
 
@@ -79,7 +90,7 @@ in
               example = "my_service";
               default = null;
             };
-            validation = lib.mkOption {
+            validation = mkOption {
               description = ''
                 A set of values that invalidate the generated values.
                 If any of these values change, the generated values will be re-generated.
@@ -106,7 +117,7 @@ in
               ]);
             };
             # the validationHash is the validation interface to the outside world
-            validationHash = lib.mkOption {
+            validationHash = mkOption {
               internal = true;
               description = ''
                 A hash of the invalidation data.
@@ -122,7 +133,7 @@ in
                   hashString "sha256" (toJSON generator.config.validation);
               defaultText = "Hash of the invalidation data";
             };
-            files = lib.mkOption {
+            files = mkOption {
               description = ''
                 A set of files to generate.
                 The generator 'script' is expected to produce exactly these files under $out.
@@ -152,8 +163,8 @@ in
                   ];
                   options =
                     {
-                      name = lib.mkOption {
-                        type = lib.types.str;
+                      name = mkOption {
+                        type = str;
                         description = ''
                           name of the public fact
                         '';
@@ -161,8 +172,8 @@ in
                         default = file.config._module.args.name;
                         defaultText = "Name of the file";
                       };
-                      generatorName = lib.mkOption {
-                        type = lib.types.str;
+                      generatorName = mkOption {
+                        type = str;
                         description = ''
                           name of the generator
                         '';
@@ -170,8 +181,8 @@ in
                         default = generator.config._module.args.name;
                         defaultText = "Name of the generator that generates this file";
                       };
-                      share = lib.mkOption {
-                        type = lib.types.bool;
+                      share = mkOption {
+                        type = bool;
                         description = ''
                           Whether the generated vars should be shared between machines.
                           Shared vars are only generated once, when the first machine using it is deployed.
@@ -182,7 +193,7 @@ in
                         default = generator.config.share;
                         defaultText = "Mirror of the share flag of the generator";
                       };
-                      deploy = lib.mkOption {
+                      deploy = mkOption {
                         description = ''
                           Whether the file should be deployed to the target machine.
 
@@ -191,14 +202,14 @@ in
                         type = bool;
                         default = true;
                       };
-                      secret = lib.mkOption {
+                      secret = mkOption {
                         description = ''
                           Whether the file should be treated as a secret.
                         '';
                         type = bool;
                         default = true;
                       };
-                      flakePath = lib.mkOption {
+                      flakePath = mkOption {
                         description = ''
                           The path to the file containing the content of the generated value.
                           This will be set automatically
@@ -206,7 +217,7 @@ in
                         type = nullOr path;
                         default = null;
                       };
-                      path = lib.mkOption {
+                      path = mkOption {
                         description = ''
                           The path to the file containing the content of the generated value.
                           This will be set automatically
@@ -223,7 +234,7 @@ in
                           path = file.config.flakePath;
                         };
                       };
-                      neededFor = lib.mkOption {
+                      neededFor = mkOption {
                         description = ''
                           This option determines when the secret will be decrypted and deployed to the target machine.
 
@@ -233,7 +244,7 @@ in
                           By setting this to `user`, the secret will be deployed prior to users and groups are created, allowing
                           users' passwords to be managed by vars. The secret will be stored in `/run/secrets-for-users` and `owner` and `group` must be `root`.
                         '';
-                        type = lib.types.enum [
+                        type = enum [
                           "partitioning"
                           "activation"
                           "users"
@@ -241,22 +252,22 @@ in
                         ];
                         default = "services";
                       };
-                      owner = lib.mkOption {
+                      owner = mkOption {
                         description = "The user name or id that will own the file.";
                         default = "root";
                       };
-                      group = lib.mkOption {
+                      group = mkOption {
                         description = "The group name or id that will own the file.";
                         default = if _class == "darwin" then "wheel" else "root";
                         defaultText = lib.literalExpression ''if _class == "darwin" then "wheel" else "root"'';
                       };
-                      mode = lib.mkOption {
-                        type = lib.types.strMatching "^[0-7]{4}$";
+                      mode = mkOption {
+                        type = strMatching "^[0-7]{4}$";
                         description = "The unix file mode of the file. Must be a 4-digit octal number.";
                         default = "0400";
                       };
                       value =
-                        lib.mkOption {
+                        mkOption {
                           description = ''
                             The content of the generated value.
                             Only available if the file is not secret.
@@ -269,7 +280,7 @@ in
                         };
                     }
                     // (lib.optionalAttrs (_class == "nixos") {
-                      restartUnits = lib.mkOption {
+                      restartUnits = mkOption {
                         description = ''
                           A list of systemd units that should be restarted after the file is deployed.
                           This is useful for services that need to reload their configuration after the file is updated.
@@ -283,7 +294,7 @@ in
                 })
               );
             };
-            prompts = lib.mkOption {
+            prompts = mkOption {
               description = ''
                 A set of prompts to ask the user for values.
                 Prompts are available to the generator script as files.
@@ -293,7 +304,7 @@ in
               type = attrsOf (
                 submodule (prompt: {
                   options = {
-                    name = lib.mkOption {
+                    name = mkOption {
                       description = ''
                         The name of the prompt.
                         This name will be used to refer to the prompt in the generator script.
@@ -302,7 +313,7 @@ in
                       default = prompt.config._module.args.name;
                       defaultText = "Name of the prompt";
                     };
-                    persist = lib.mkOption {
+                    persist = mkOption {
                       description = ''
                         Whether the prompted value should be stored in a file with the same name as the prompt.
 
@@ -317,7 +328,7 @@ in
                       type = bool;
                       default = false;
                     };
-                    description = lib.mkOption {
+                    description = mkOption {
                       description = ''
                         The description of the prompted value
                       '';
@@ -326,7 +337,7 @@ in
                       default = prompt.config._module.args.name;
                       defaultText = "Name of the prompt";
                     };
-                    type = lib.mkOption {
+                    type = mkOption {
                       description = ''
                         The input type of the prompt.
                         The following types are available:
@@ -347,7 +358,7 @@ in
                 })
               );
             };
-            runtimeInputs = lib.mkOption {
+            runtimeInputs = mkOption {
               description = ''
                 A list of packages that the generator script requires.
                 These packages will be available in the PATH when the script is run.
@@ -355,7 +366,7 @@ in
               type = listOf package;
               default = [ ];
             };
-            script = lib.mkOption {
+            script = mkOption {
               description = ''
                 The script to run to generate the files.
                 The script will be run with the following environment variables:
@@ -369,17 +380,17 @@ in
               type = either str path;
               default = "";
             };
-            finalScript = lib.mkOption {
+            finalScript = mkOption {
               description = ''
                 The final generator script, wrapped, so:
                   - all required programs are in PATH
                   - sandbox is set up correctly
               '';
-              type = lib.types.path;
+              type = path;
               readOnly = true;
               internal = true;
             };
-            share = lib.mkOption {
+            share = mkOption {
               description = ''
                 Whether the generated vars should be shared between machines.
                 Shared vars are only generated once, when the first machine using it is deployed.

nixosModules/clanCore/vars/settings-opts.nix

@@ -65,4 +65,14 @@
       Set it to pkgs.pass for GPG or pkgs.passage for age encryption.
     '';
   };
+
+  dependenciesType = lib.mkOption {
+    type = lib.types.raw;
+    description = ''
+      The type of the `dependencies` option.
+    '';
+    internal = true;
+    readOnly = true;
+    visible = false;
+  };
 }

pkgs/clan-app/clan_app/api/api_bridge.py

@@ -7,7 +7,7 @@ from typing import TYPE_CHECKING, Any
 
 from clan_lib.api import ApiResponse
 from clan_lib.api.tasks import WebThread
-from clan_lib.async_run import set_should_cancel
+from clan_lib.async_run import set_current_thread_opkey, set_should_cancel
 
 if TYPE_CHECKING:
     from .middleware import Middleware
@@ -98,7 +98,7 @@ class ApiBridge(ABC):
         *,
         thread_name: str = "ApiBridgeThread",
         wait_for_completion: bool = False,
-        timeout: float = 60.0,
+        timeout: float = 60.0 * 60,  # 1 hour default timeout
     ) -> None:
         """Process an API request in a separate thread with cancellation support.
 
@@ -112,6 +112,7 @@ class ApiBridge(ABC):
 
         def thread_task(stop_event: threading.Event) -> None:
             set_should_cancel(lambda: stop_event.is_set())
+            set_current_thread_opkey(op_key)
             try:
                 log.debug(
                     f"Processing {request.method_name} with args {request.args} "

pkgs/clan-app/clan_app/api/file_gtk.py

@@ -9,6 +9,7 @@ gi.require_version("Gtk", "4.0")
 
 from clan_lib.api import ApiError, ErrorDataClass, SuccessDataClass
 from clan_lib.api.directory import FileRequest
+from clan_lib.async_run import get_current_thread_opkey
 from clan_lib.clan.check import check_clan_valid
 from clan_lib.flake import Flake
 from gi.repository import Gio, GLib, Gtk
@@ -24,7 +25,7 @@ def remove_none(_list: list) -> list:
 RESULT: dict[str, SuccessDataClass[list[str] | None] | ErrorDataClass] = {}
 
 
-def get_clan_folder(*, op_key: str) -> SuccessDataClass[Flake] | ErrorDataClass:
+def get_clan_folder() -> SuccessDataClass[Flake] | ErrorDataClass:
     """
     Opens the clan folder using the GTK file dialog.
     Returns the path to the clan folder or an error if it fails.
@@ -34,7 +35,10 @@ def get_clan_folder(*, op_key: str) -> SuccessDataClass[Flake] | ErrorDataClass:
         title="Select Clan Folder",
         initial_folder=str(Path.home()),
     )
-    response = get_system_file(file_request, op_key=op_key)
+
+    response = get_system_file(file_request)
+
+    op_key = response.op_key
 
     if isinstance(response, ErrorDataClass):
         return response
@@ -70,8 +74,13 @@ def get_clan_folder(*, op_key: str) -> SuccessDataClass[Flake] | ErrorDataClass:
 
 
 def get_system_file(
-    file_request: FileRequest, *, op_key: str
+    file_request: FileRequest,
 ) -> SuccessDataClass[list[str] | None] | ErrorDataClass:
+    op_key = get_current_thread_opkey()
+
+    if not op_key:
+        msg = "No operation key found in the current thread context."
+        raise RuntimeError(msg)
     GLib.idle_add(gtk_open_file, file_request, op_key)
 
     while RESULT.get(op_key) is None:

pkgs/clan-app/clan_app/api/middleware/argument_parsing.py

@@ -21,18 +21,12 @@ class ArgumentParsingMiddleware(Middleware):
             # Convert dictionary arguments to dataclass instances
             reconciled_arguments = {}
             for k, v in context.request.args.items():
-                if k == "op_key":
-                    continue
-
                 # Get the expected argument type from the API
                 arg_class = self.api.get_method_argtype(context.request.method_name, k)
 
                 # Convert dictionary to dataclass instance
                 reconciled_arguments[k] = from_dict(arg_class, v)
 
-            # Add op_key to arguments
-            reconciled_arguments["op_key"] = context.request.op_key
-
             # Create a new request with reconciled arguments
 
             updated_request = BackendRequest(

pkgs/clan-app/clan_app/deps/http/http_bridge.py

@@ -1,13 +1,22 @@
 import json
 import logging
+import threading
 import uuid
 from http.server import BaseHTTPRequestHandler
 from pathlib import Path
 from typing import TYPE_CHECKING, Any
 from urllib.parse import urlparse
 
-from clan_lib.api import MethodRegistry, SuccessDataClass, dataclass_to_dict
+from clan_lib.api import (
+    MethodRegistry,
+    SuccessDataClass,
+    dataclass_to_dict,
+)
 from clan_lib.api.tasks import WebThread
+from clan_lib.async_run import (
+    set_current_thread_opkey,
+    set_should_cancel,
+)
 
 from clan_app.api.api_bridge import ApiBridge, BackendRequest, BackendResponse
 
@@ -324,17 +333,34 @@ class HttpBridge(ApiBridge, BaseHTTPRequestHandler):
             msg = f"Operation key '{op_key}' is already in use. Please try again."
             raise ValueError(msg)
 
+    def process_request_in_thread(
+        self,
+        request: BackendRequest,
+        *,
+        thread_name: str = "ApiBridgeThread",
+        wait_for_completion: bool = False,
+        timeout: float = 60.0 * 60,  # 1 hour default timeout
+    ) -> None:
+        pass
+
     def _process_api_request_in_thread(
         self, api_request: BackendRequest, method_name: str
     ) -> None:
         """Process the API request in a separate thread."""
-        # Use the inherited thread processing method
-        self.process_request_in_thread(
-            api_request,
-            thread_name="HttpThread",
-            wait_for_completion=True,
-            timeout=60.0,
+        stop_event = threading.Event()
+        request = api_request
+        op_key = request.op_key or "unknown"
+        set_should_cancel(lambda: stop_event.is_set())
+        set_current_thread_opkey(op_key)
+
+        curr_thread = threading.current_thread()
+        self.threads[op_key] = WebThread(thread=curr_thread, stop_event=stop_event)
+
+        log.debug(
+            f"Processing {request.method_name} with args {request.args} "
+            f"and header {request.header}"
         )
+        self.process_request(request)
 
     def log_message(self, format: str, *args: Any) -> None:  # noqa: A002
         """Override default logging to use our logger."""

pkgs/clan-app/clan_app/deps/webview/_webview_ffi.py

@@ -29,10 +29,7 @@ def _get_lib_names() -> list[str]:
         msg = f"Unsupported architecture: {machine}"
         raise RuntimeError(msg)
     if system == "darwin":
-        if machine == "arm64":
-            return ["libwebview.dylib"]
-        msg = "Not supported"
-        raise RuntimeError(msg)
+        return ["libwebview.dylib"]
     # linux
     return ["libwebview.so"]
 

pkgs/clan-app/process-compose-2d.yaml

@@ -1,39 +0,0 @@
-version: "0.5"
-
-processes:
-  # App Dev
-
-  clan-app-ui:
-    namespace: "app"
-    command: |
-      cd $(git rev-parse --show-toplevel)/pkgs/clan-app/ui-2d
-      npm install
-      vite
-    ready_log_line: "VITE"
-
-  clan-app:
-    namespace: "app"
-    command: |
-      cd $(git rev-parse --show-toplevel)/pkgs/clan-app
-      ./bin/clan-app --debug --content-uri http://localhost:3000
-    depends_on:
-      clan-app-ui:
-        condition: "process_log_ready"
-    is_foreground: true
-    ready_log_line: "Debug mode enabled"
-
-  # Storybook Dev
-
-  storybook:
-    namespace: "storybook"
-    command: |
-      cd $(git rev-parse --show-toplevel)/pkgs/clan-app/ui-2d
-      npm run storybook-dev -- --ci
-    ready_log_line: "started"
-
-  luakit:
-    namespace: "storybook"
-    command: "luakit http://localhost:6006"
-    depends_on:
-      storybook:
-        condition: "process_log_ready"

pkgs/clan-app/ui.nix

@@ -21,6 +21,12 @@ buildNpmPackage (_finalAttrs: {
     mkdir -p api
     cp -r ${clan-ts-api}/* api
     cp -r ${fonts} ".fonts"
+
+    # only needed for the next couple weeks to make sure this file doesn't make it back into the git history
+    if [[ -f "${./ui}/src/routes/Onboarding/background.jpg" ]]; then
+        echo "background.jpg found, exiting"
+        exit 1
+    fi
   '';
 
   # todo figure out why this fails only inside of Nix

pkgs/clan-app/ui/.storybook/main.ts

@@ -3,7 +3,7 @@ import type { StorybookConfig } from "@kachurun/storybook-solid-vite";
 
 const config: StorybookConfig = {
   framework: "@kachurun/storybook-solid-vite",
-  stories: ["../src/components/**/*.mdx", "../src/components/**/*.stories.tsx"],
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.tsx"],
   addons: [
     "@storybook/addon-links",
     "@storybook/addon-docs",

pkgs/clan-app/ui/icons/clan-logo.svg

@@ -1,10 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="223" height="89" fill="currentColor">
-    <g clip-path="url(#a)">
-        <path d="M55.503 18.696h10.104a1.946 1.946 0 0 0 1.943-1.948v-7.79c0-1.075-.87-1.947-1.943-1.947h-3.186a1.863 1.863 0 0 1-1.866-1.87V1.947C60.555.872 59.685 0 58.612 0h-27.98a1.946 1.946 0 0 0-1.944 1.947v3.194c0 1.036-.832 1.87-1.865 1.87h-3.187a1.946 1.946 0 0 0-1.943 1.947v3.194c0 1.036-.832 1.87-1.866 1.87h-3.186a1.946 1.946 0 0 0-1.943 1.947s-.467 1.153-.467 23.253c0 19.763.467 21.913.467 21.913 0 1.075.87 1.948 1.943 1.948h3.186c1.034 0 1.866.833 1.866 1.87v3.271c0 1.036.831 1.87 1.865 1.87h3.265c1.033 0 1.865.833 1.865 1.87v3.193c0 1.075.87 1.948 1.943 1.948h27.981a1.946 1.946 0 0 0 1.943-1.948v-3.194c0-1.036.832-1.87 1.866-1.87h5.145a1.946 1.946 0 0 0 1.943-1.947v-9.285c0-1.075-.87-1.948-1.943-1.948H55.503a1.946 1.946 0 0 0-1.943 1.948v4.69c0 1.035-.832 1.869-1.866 1.869H37.55a1.863 1.863 0 0 1-1.866-1.87v-4.752c0-1.075-.87-1.947-1.943-1.947H29c-1.034 0-1.609.148-1.865-1.87-.078-.646-.125-1.44-.18-2.508-.147-2.68-.287-5.5-.287-13.539 0-11.24.288-16.81.466-18.369.18-1.558.832-1.87 1.866-1.87h4.741a1.946 1.946 0 0 0 1.943-1.947v-3.193c0-1.037.832-1.87 1.866-1.87h14.145c1.034 0 1.866.833 1.866 1.87v3.193c0 1.075.87 1.948 1.943 1.948M20.247 74.822h-2.293a.814.814 0 0 1-.808-.81v-2.298c0-.896-.723-1.62-1.617-1.62H9.327c-.894 0-1.617.724-1.617 1.62v2.298c0 .444-.365.81-.808.81H4.609c-.894 0-1.617.725-1.617 1.62v6.217c0 .896.723 1.62 1.617 1.62h2.293c.443 0 .808.366.808.81v2.299c0 .895.723 1.62 1.617 1.62h6.202c.894 0 1.617-.725 1.617-1.62v-2.299c0-.444.365-.81.808-.81h2.293c.894 0 1.617-.724 1.617-1.62v-6.216c0-.896-.723-1.62-1.617-1.62M221.135 35.04h-1.71a1.863 1.863 0 0 1-1.866-1.87v-3.272c0-1.036-.831-1.87-1.865-1.87h-3.265a1.863 1.863 0 0 1-1.865-1.87v-3.271c0-1.036-.832-1.87-1.865-1.87h-20.971a1.863 1.863 0 0 0-1.865 1.87v3.965c0 .514-.42.935-.933.935h-3.559c-.513 0-.84-.32-.933-.935l-.622-3.918c-.148-1.099-.676-1.777-1.788-1.777l-3.653-.14h-2.052a3.736 3.736 0 0 0-3.73 3.74V61.68a3.736 3.736 0 0 1-3.731 3.739h-8.394a1.863 1.863 0 0 1-1.866-1.87V36.714c0-11.825-7.461-18.813-22.556-18.813-13.718 0-20.325 5.04-21.203 14.443-.109 1.153.552 1.815 1.702 1.815l7.757.569c1.143.1 1.594-.554 1.811-1.652.77-3.74 4.174-5.827 9.933-5.827 7.081 0 10.042 3.358 10.042 9.076v3.014c0 1.036-.831 1.87-1.865 1.87l-.342-.024h-9.715c-15.421 0-22.984 5.983-22.984 17.956 0 3.802.778 7.058 2.254 9.738h-.59c-1.765-1.27-2.457-2.236-3.055-2.93-.256-.295-.653-.537-1.345-.537h-1.717l-5.993.008h-3.264a3.736 3.736 0 0 1-3.731-3.74V1.769C89.74.654 89.072 0 87.969 0H79.55c-1.034 0-1.865.732-1.865 1.768l-.024 54.304v13.554c0 4.13 3.343 7.479 7.462 7.479h50.84c8.448-.429 8.604-3.42 9.436-4.542.645 3.56 1.865 4.347 4.71 4.518 8.137.117 18.343.032 18.49.024h4.975c4.119 0 6.684-3.35 6.684-7.479l.777-27.264c0-1.036.832-1.87 1.866-1.87h2.021a1.56 1.56 0 0 0 1.554-1.558v-3.583c0-1.036.832-1.87 1.866-1.87h11.868a3.37 3.37 0 0 1 3.366 3.373v3.249c0 1.075.87 1.947 1.943 1.947h4.119c.513 0 .933.42.933.935v32.25c0 1.036.831 1.87 1.865 1.87h6.84a3.736 3.736 0 0 0 3.731-3.74V36.91c0-1.036-.832-1.87-1.866-1.87zM142.64 54.225c0 8.927-6.132 14.715-15.335 14.715-6.606 0-9.793-2.953-9.793-8.748 0-6.442 3.832-9.636 11.62-9.636h13.508v3.669"/>
-    </g>
-    <defs>
-        <clipPath id="a">
-            <path d="M0 0h223v89H0z"/>
-        </clipPath>
-    </defs>
-</svg>

pkgs/clan-app/ui/icons/cursor.svg

@@ -22,4 +22,4 @@
     <rect x="24" y="24" width="6" height="6"/>
     <rect x="29" y="24" width="6" height="6"/>
     <rect x="6" y="30" width="6" height="6"/>
-</svg>
+</svg>

pkgs/clan-app/ui/logos/clan.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 26" fill="none">
+    <path d="M15.2735 5.89115H18.2129C18.5249 5.89115 18.7781 5.63627 18.7781 5.32222V3.04651C18.7781 2.73246 18.5249 2.47758 18.2129 2.47758H17.2858C16.9851 2.47758 16.7432 2.23408 16.7432 1.93141V0.998371C16.7432 0.684323 16.4899 0.429443 16.1779 0.429443H8.03798C7.72595 0.429443 7.47271 0.684323 7.47271 0.998371V1.93141C7.47271 2.23408 7.23077 2.47758 6.93005 2.47758H6.003C5.69097 2.47758 5.43773 2.73246 5.43773 3.04651V3.97955C5.43773 4.28222 5.1958 4.52572 4.89507 4.52572H3.96803C3.656 4.52572 3.40276 4.7806 3.40276 5.09465C3.40276 5.09465 3.26709 5.43146 3.26709 11.4582C3.26709 17.2317 3.40276 17.8598 3.40276 17.8598C3.40276 18.1739 3.656 18.4287 3.96803 18.4287H4.89507C5.1958 18.4287 5.43773 18.6722 5.43773 18.9749V19.9307C5.43773 20.2334 5.67967 20.4769 5.98039 20.4769H6.93005C7.23077 20.4769 7.47271 20.7204 7.47271 21.023V21.9561C7.47271 22.2701 7.72595 22.525 8.03798 22.525H16.1779C16.4899 22.525 16.7432 22.2701 16.7432 21.9561V21.023C16.7432 20.7204 16.9851 20.4769 17.2858 20.4769H18.7827C19.0947 20.4769 19.3479 20.222 19.3479 19.9079V17.1953C19.3479 16.8812 19.0947 16.6264 18.7827 16.6264H15.2735C14.9614 16.6264 14.7082 16.8812 14.7082 17.1953V18.5653C14.7082 18.8679 14.4662 19.1114 14.1655 19.1114H10.0503C9.74962 19.1114 9.50768 18.8679 9.50768 18.5653V17.1771C9.50768 16.863 9.25444 16.6082 8.94241 16.6082H7.56315C7.26243 16.6082 7.09511 16.6514 7.02049 16.062C6.99788 15.8731 6.98431 15.641 6.96849 15.3292C6.92552 14.5464 6.88483 13.7226 6.88483 11.374C6.88483 8.5196 6.96849 6.89246 7.02049 6.43732C7.0725 5.98218 7.26243 5.89115 7.56315 5.89115H8.94241C9.25444 5.89115 9.50768 5.63627 9.50768 5.32222V4.38918C9.50768 4.08651 9.74962 3.84301 10.0503 3.84301H14.1655C14.4662 3.84301 14.7082 4.08651 14.7082 4.38918V5.32222C14.7082 5.63627 14.9614 5.89115 15.2735 5.89115Z" fill="currentColor"/>
+    <path d="M5.01717 21.8582H4.35015C4.22126 21.8582 4.11499 21.7513 4.11499 21.6216V20.9502C4.11499 20.6885 3.90471 20.4769 3.64469 20.4769H1.84034C1.58032 20.4769 1.37004 20.6885 1.37004 20.9502V21.6216C1.37004 21.7513 1.26377 21.8582 1.13488 21.8582H0.467864C0.207839 21.8582 -0.00244141 22.0699 -0.00244141 22.3316V24.1476C-0.00244141 24.4093 0.207839 24.6209 0.467864 24.6209H1.13488C1.26377 24.6209 1.37004 24.7279 1.37004 24.8576V25.5289C1.37004 25.7907 1.58032 26.0023 1.84034 26.0023H3.64469C3.90471 26.0023 4.11499 25.7907 4.11499 25.5289V24.8576C4.11499 24.7279 4.22126 24.6209 4.35015 24.6209H5.01717C5.27719 24.6209 5.48747 24.4093 5.48747 24.1476V22.3316C5.48747 22.0699 5.27719 21.8582 5.01717 21.8582Z" fill="currentColor"/>
+    <path d="M63.4576 10.2361H62.9601C62.6594 10.2361 62.4175 9.99265 62.4175 9.68998V8.73418C62.4175 8.43151 62.1755 8.18801 61.8748 8.18801H60.9252C60.6244 8.18801 60.3825 7.94451 60.3825 7.64184V6.68604C60.3825 6.38337 60.1406 6.13987 59.8398 6.13987H53.7394C53.4387 6.13987 53.1968 6.38337 53.1968 6.68604V7.84438C53.1968 7.99457 53.0747 8.11746 52.9254 8.11746H51.8899C51.7406 8.11746 51.6457 8.02416 51.6185 7.84438L51.4376 6.69969C51.3947 6.37882 51.2409 6.18083 50.9176 6.18083L49.8549 6.13987H49.258C48.6588 6.13987 48.1726 6.62915 48.1726 7.23221V18.0191C48.1726 18.6221 47.6865 19.1114 47.0873 19.1114H44.6453C44.3446 19.1114 44.1027 18.8679 44.1027 18.5653V10.7254C44.1027 7.2709 41.932 5.22958 37.541 5.22958C33.5502 5.22958 31.6283 6.70197 31.3728 9.44875C31.3411 9.78556 31.5333 9.97899 31.868 9.97899L34.1245 10.1451C34.4569 10.1747 34.588 9.98354 34.6514 9.66267C34.8752 8.57033 35.8656 7.96044 37.541 7.96044C39.6009 7.96044 40.4623 8.94127 40.4623 10.6116V11.4923C40.4623 11.795 40.2204 12.0385 39.9197 12.0385L39.8202 12.0317H36.9938C32.5078 12.0317 30.3078 13.7794 30.3078 17.2772C30.3078 18.3877 30.5339 19.339 30.9635 20.1218H30.7917C30.2784 19.7509 30.0772 19.4687 29.9031 19.2662C29.8285 19.1797 29.7131 19.1091 29.5119 19.1091H29.0122L27.2689 19.1114H26.3193C25.7201 19.1114 25.2339 18.6221 25.2339 18.0191V0.516586C25.2339 0.19116 25.0395 0 24.7184 0H22.2697C21.9689 0 21.727 0.213917 21.727 0.516586L21.7202 16.3806V20.3403C21.7202 21.5464 22.6925 22.525 23.8909 22.525H38.6806C41.1384 22.3998 41.1836 21.5259 41.4256 21.1982C41.6132 22.2382 41.9682 22.4681 42.7958 22.5182C45.1631 22.5523 48.1319 22.5273 48.1749 22.525H49.622C50.8204 22.525 51.5665 21.5464 51.5665 20.3403L51.7926 12.3753C51.7926 12.0726 52.0346 11.8291 52.3353 11.8291H52.9232C53.1719 11.8291 53.3754 11.6243 53.3754 11.374V10.3272C53.3754 10.0245 53.6173 9.781 53.9181 9.781H57.3707C57.9111 9.781 58.3498 10.2225 58.3498 10.7664V11.7154C58.3498 12.0294 58.603 12.2843 58.915 12.2843H60.1134C60.2626 12.2843 60.3848 12.4072 60.3848 12.5574V21.9788C60.3848 22.2815 60.6267 22.525 60.9274 22.525H62.9172C63.5164 22.525 64.0025 22.0357 64.0025 21.4326V10.7823C64.0025 10.4796 63.7606 10.2361 63.4598 10.2361H63.4576ZM40.6229 15.8412C40.6229 18.4492 38.8389 20.14 36.1618 20.14C34.2398 20.14 33.3128 19.2775 33.3128 17.5844C33.3128 15.7024 34.4275 14.7694 36.6931 14.7694H40.6229V15.8389V15.8412Z" fill="currentColor"/>
+</svg>

pkgs/clan-app/ui/logos/darknet.svg

@@ -0,0 +1,43 @@
+<svg viewBox="0 0 200 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M191.879 19.297C191.736 19.297 191.602 19.2434 191.477 19.1362C191.37 19.029 191.316 18.9039 191.316 18.761V6.16432C191.316 6.02138 191.37 5.8963 191.477 5.7891C191.602 5.68189 191.736 5.62829 191.879 5.62829H193.246C193.568 5.62829 193.764 5.80697 193.836 6.16432C193.907 6.48594 193.979 6.72715 194.05 6.88796C194.139 7.0309 194.273 7.10237 194.452 7.10237C194.559 7.10237 194.676 7.06663 194.801 6.99516C194.926 6.90582 195.051 6.80755 195.176 6.70035C195.569 6.36086 195.971 6.10178 196.382 5.92311C196.793 5.72656 197.365 5.62829 198.097 5.62829H199.464C199.607 5.62829 199.732 5.68189 199.839 5.7891C199.946 5.8963 200 6.02138 200 6.16432V8.28163C200 8.42457 199.946 8.54964 199.839 8.65685C199.732 8.76405 199.607 8.81766 199.464 8.81766H197.936C196.9 8.81766 196.042 9.12141 195.363 9.7289C194.702 10.3364 194.372 11.2745 194.372 12.543V18.761C194.372 18.9039 194.318 19.029 194.211 19.1362C194.104 19.2434 193.979 19.297 193.836 19.297H191.879Z"
+          fill="currentColor"/>
+    <path d="M182.709 19.7526C180.583 19.7526 178.93 19.0915 177.751 17.7693C176.589 16.4471 176.009 14.6782 176.009 12.4626C176.009 11.0154 176.268 9.74677 176.786 8.65685C177.304 7.54906 178.064 6.69141 179.064 6.08391C180.065 5.47642 181.253 5.17267 182.629 5.17267C184.648 5.17267 186.238 5.7623 187.399 6.94156C188.579 8.12082 189.168 9.74677 189.168 11.8194V12.7843C189.168 13.0165 189.106 13.1952 188.981 13.3203C188.856 13.4454 188.686 13.5079 188.471 13.5079H179.573C179.395 13.5079 179.305 13.6062 179.305 13.8027C179.341 14.839 179.681 15.6609 180.324 16.2684C180.967 16.8581 181.762 17.1529 182.709 17.1529C184.031 17.1529 184.978 16.6526 185.55 15.652C185.747 15.3304 185.97 15.1696 186.22 15.1696H188.284C188.445 15.1696 188.579 15.2321 188.686 15.3572C188.793 15.4644 188.82 15.6163 188.766 15.8128C188.427 16.9921 187.73 17.948 186.676 18.6806C185.622 19.3953 184.299 19.7526 182.709 19.7526ZM179.279 10.801C179.279 10.9796 179.377 11.069 179.573 11.069H185.791C185.952 11.069 186.032 10.9796 186.032 10.801C186.032 9.92545 185.72 9.19288 185.094 8.60325C184.487 7.99575 183.665 7.692 182.629 7.692C181.664 7.692 180.869 7.99575 180.243 8.60325C179.636 9.19288 179.314 9.92545 179.279 10.801Z"
+          fill="currentColor"/>
+    <path d="M166.551 19.7526C165.621 19.7526 164.773 19.6008 164.004 19.297C163.236 18.9754 162.584 18.5108 162.048 17.9033C161.44 17.2601 160.976 16.4739 160.654 15.5448C160.333 14.6157 160.172 13.5883 160.172 12.4627C160.172 11.337 160.333 10.3096 160.654 9.38049C160.976 8.45137 161.44 7.6652 162.048 7.02197C162.584 6.43234 163.236 5.97671 164.004 5.6551C164.773 5.33348 165.621 5.17267 166.551 5.17267C167.247 5.17267 167.801 5.24414 168.212 5.38708C168.641 5.51215 169.079 5.69083 169.526 5.92311C169.561 5.94098 169.66 5.99458 169.82 6.08392C169.981 6.17326 170.133 6.21792 170.276 6.21792C170.598 6.21792 170.758 6.03032 170.758 5.6551V0.536027C170.758 0.393087 170.812 0.268014 170.919 0.160808C171.026 0.0536026 171.16 0 171.321 0H173.305C173.447 0 173.573 0.0536026 173.68 0.160808C173.787 0.268014 173.841 0.393087 173.841 0.536027V18.761C173.841 18.9039 173.787 19.029 173.68 19.1362C173.573 19.2434 173.447 19.297 173.305 19.297H171.911C171.661 19.297 171.446 19.1541 171.268 18.8682C171.16 18.7252 171.053 18.618 170.946 18.5466C170.857 18.4751 170.732 18.4394 170.571 18.4394C170.356 18.4394 170.062 18.5644 169.686 18.8146C169.24 19.1005 168.793 19.3238 168.346 19.4846C167.9 19.6633 167.301 19.7526 166.551 19.7526ZM163.308 12.4627C163.308 13.6955 163.62 14.6961 164.246 15.4644C164.567 15.8575 164.969 16.1702 165.452 16.4025C165.934 16.6169 166.488 16.7241 167.113 16.7241C168.328 16.7241 169.284 16.3042 169.981 15.4644C170.589 14.6961 170.892 13.6955 170.892 12.4627C170.892 11.2298 170.589 10.2381 169.981 9.4877C169.302 8.63005 168.346 8.20123 167.113 8.20123C166.488 8.20123 165.934 8.31737 165.452 8.54965C164.969 8.76406 164.567 9.07674 164.246 9.4877C163.62 10.2203 163.308 11.2119 163.308 12.4627Z"
+          fill="currentColor"/>
+    <path d="M155.415 19.297C155.272 19.297 155.147 19.2434 155.04 19.1362C154.933 19.029 154.879 18.9039 154.879 18.761V0.536027C154.879 0.393087 154.933 0.268014 155.04 0.160808C155.147 0.0536026 155.272 0 155.415 0H157.399C157.542 0 157.667 0.0536026 157.774 0.160808C157.881 0.268014 157.935 0.393087 157.935 0.536027V18.761C157.935 18.9039 157.881 19.029 157.774 19.1362C157.667 19.2434 157.542 19.297 157.399 19.297H155.415Z"
+          fill="currentColor"/>
+    <path d="M149.107 19.297C148.946 19.297 148.812 19.2434 148.705 19.1362C148.615 19.029 148.571 18.9039 148.571 18.761V6.16432C148.571 6.02138 148.615 5.89631 148.705 5.7891C148.812 5.68189 148.946 5.62829 149.107 5.62829H151.09C151.251 5.62829 151.376 5.68189 151.465 5.7891C151.573 5.87844 151.626 6.00351 151.626 6.16432V18.761C151.626 18.9218 151.573 19.0558 151.465 19.163C151.376 19.2523 151.251 19.297 151.09 19.297H149.107ZM148.33 0.696836C148.33 0.58963 148.365 0.491358 148.437 0.40202C148.526 0.312682 148.633 0.268013 148.758 0.268013H151.492C151.617 0.268013 151.715 0.312682 151.787 0.40202C151.876 0.491358 151.921 0.58963 151.921 0.696836V3.18937C151.921 3.31444 151.876 3.42164 151.787 3.51098C151.715 3.58245 151.617 3.61819 151.492 3.61819H148.758C148.633 3.61819 148.526 3.58245 148.437 3.51098C148.365 3.42164 148.33 3.31444 148.33 3.18937V0.696836Z"
+          fill="currentColor"/>
+    <path d="M105.963 19.7526C105.213 19.7526 104.614 19.6633 104.168 19.4846C103.721 19.3238 103.274 19.1005 102.828 18.8146C102.452 18.5644 102.158 18.4394 101.943 18.4394C101.782 18.4394 101.648 18.4751 101.541 18.5466C101.452 18.618 101.353 18.7252 101.246 18.8682C101.068 19.1541 100.853 19.297 100.603 19.297H99.2094C99.0664 19.297 98.9414 19.2434 98.8342 19.1362C98.7269 19.029 98.6733 18.9039 98.6733 18.761V0.536027C98.6733 0.393087 98.7269 0.268014 98.8342 0.160808C98.9414 0.0536026 99.0664 0 99.2094 0H101.193C101.336 0 101.461 0.0536026 101.568 0.160808C101.675 0.268014 101.729 0.393087 101.729 0.536027V5.6551C101.729 6.03032 101.898 6.21792 102.238 6.21792C102.381 6.21792 102.533 6.17326 102.694 6.08392C102.854 5.99458 102.953 5.94098 102.988 5.92311C103.435 5.69083 103.864 5.51215 104.275 5.38708C104.704 5.24414 105.266 5.17267 105.963 5.17267C106.892 5.17267 107.741 5.33348 108.509 5.6551C109.278 5.97671 109.93 6.43234 110.466 7.02197C111.073 7.6652 111.538 8.45137 111.86 9.38049C112.181 10.3096 112.342 11.337 112.342 12.4627C112.342 13.5883 112.181 14.6157 111.86 15.5448C111.538 16.4739 111.073 17.2601 110.466 17.9033C109.93 18.5108 109.278 18.9754 108.509 19.297C107.741 19.6008 106.892 19.7526 105.963 19.7526ZM101.621 12.4627C101.621 13.6955 101.925 14.6961 102.533 15.4644C103.23 16.3042 104.185 16.7241 105.4 16.7241C106.026 16.7241 106.58 16.6169 107.062 16.4025C107.545 16.1702 107.947 15.8575 108.268 15.4644C108.894 14.6961 109.206 13.6955 109.206 12.4627C109.206 11.2119 108.894 10.2203 108.268 9.4877C107.947 9.07674 107.545 8.76406 107.062 8.54965C106.58 8.31737 106.026 8.20123 105.4 8.20123C104.168 8.20123 103.212 8.63005 102.533 9.4877C101.925 10.2381 101.621 11.2298 101.621 12.4627Z"
+          fill="currentColor"/>
+    <path d="M93.5555 19.297C92.1619 19.297 91.0898 18.9039 90.3394 18.1177C89.6068 17.3316 89.2405 16.2863 89.2405 14.982V8.81765C89.2405 8.63897 89.1512 8.54964 88.9725 8.54964H86.2924C86.1494 8.54964 86.0244 8.49603 85.9172 8.38883C85.81 8.28162 85.7563 8.15655 85.7563 8.01361V6.16431C85.7563 6.02137 85.81 5.8963 85.9172 5.78909C86.0244 5.68189 86.1494 5.62828 86.2924 5.62828H88.9725C89.1512 5.62828 89.2405 5.53895 89.2405 5.36027V1.47407C89.2405 1.33113 89.2941 1.20605 89.4013 1.09885C89.5085 0.991643 89.6336 0.93804 89.7766 0.93804H91.7598C91.9028 0.93804 92.0279 0.991643 92.1351 1.09885C92.2423 1.20605 92.2959 1.33113 92.2959 1.47407V5.36027C92.2959 5.53895 92.3852 5.62828 92.5639 5.62828H96.2625C96.4054 5.62828 96.5305 5.68189 96.6377 5.78909C96.7449 5.8963 96.7985 6.02137 96.7985 6.16431V8.01361C96.7985 8.15655 96.7449 8.28162 96.6377 8.38883C96.5305 8.49603 96.4054 8.54964 96.2625 8.54964H92.5639C92.3852 8.54964 92.2959 8.63897 92.2959 8.81765V14.5531C92.2959 15.107 92.4477 15.5269 92.7515 15.8128C93.0552 16.0987 93.4751 16.2416 94.0112 16.2416H96.2625C96.4054 16.2416 96.5305 16.2952 96.6377 16.4024C96.7449 16.5096 96.7985 16.6347 96.7985 16.7777V18.761C96.7985 18.9039 96.7449 19.029 96.6377 19.1362C96.5305 19.2434 96.4054 19.297 96.2625 19.297H93.5555Z"
+          fill="currentColor"/>
+    <path d="M78.7594 19.7526C76.6332 19.7526 74.9804 19.0915 73.8012 17.7693C72.6398 16.4471 72.0591 14.6782 72.0591 12.4626C72.0591 11.0154 72.3182 9.74677 72.8363 8.65685C73.3545 7.54906 74.1139 6.69141 75.1144 6.08391C76.115 5.47642 77.3032 5.17267 78.679 5.17267C80.698 5.17267 82.2883 5.7623 83.4496 6.94156C84.6289 8.12082 85.2185 9.74677 85.2185 11.8194V12.7843C85.2185 13.0165 85.156 13.1952 85.0309 13.3203C84.9059 13.4454 84.7361 13.5079 84.5217 13.5079H75.6237C75.445 13.5079 75.3556 13.6062 75.3556 13.8027C75.3914 14.839 75.7309 15.6609 76.3741 16.2684C77.0173 16.8581 77.8124 17.1529 78.7594 17.1529C80.0816 17.1529 81.0286 16.6526 81.6004 15.652C81.7969 15.3304 82.0202 15.1696 82.2704 15.1696H84.3341C84.4949 15.1696 84.6289 15.2321 84.7361 15.3572C84.8433 15.4644 84.8701 15.6163 84.8165 15.8128C84.477 16.9921 83.7802 17.948 82.726 18.6806C81.6718 19.3953 80.3496 19.7526 78.7594 19.7526ZM75.3288 10.801C75.3288 10.9796 75.4271 11.069 75.6237 11.069H81.8416C82.0024 11.069 82.0828 10.9796 82.0828 10.801C82.0828 9.92545 81.7701 9.19288 81.1447 8.60325C80.5372 7.99575 79.7153 7.692 78.679 7.692C77.7142 7.692 76.9191 7.99575 76.2937 8.60325C75.6862 9.19288 75.3646 9.92545 75.3288 10.801Z"
+          fill="currentColor"/>
+    <path d="M58.246 19.297C58.103 19.297 57.978 19.2434 57.8708 19.1362C57.7636 19.029 57.71 18.9039 57.71 18.761V6.16432C57.71 6.02138 57.7636 5.8963 57.8708 5.7891C57.978 5.68189 58.103 5.62829 58.246 5.62829H59.6665C59.8273 5.62829 59.9523 5.66402 60.0417 5.7355C60.131 5.7891 60.2382 5.88737 60.3633 6.03031C60.4526 6.15538 60.533 6.25366 60.6045 6.32513C60.6938 6.37873 60.81 6.40553 60.9529 6.40553C61.078 6.40553 61.2031 6.3698 61.3281 6.29833C61.4532 6.22685 61.5783 6.14645 61.7034 6.05711C62.0964 5.7891 62.4985 5.57469 62.9094 5.41388C63.3382 5.25307 63.9279 5.17267 64.6783 5.17267C65.7146 5.17267 66.6348 5.39601 67.4388 5.8427C68.2429 6.28939 68.8682 6.94156 69.3149 7.7992C69.7795 8.65685 70.0118 9.68424 70.0118 10.8814V18.761C70.0118 18.9039 69.9582 19.029 69.851 19.1362C69.7438 19.2434 69.6187 19.297 69.4757 19.297H67.4924C67.3495 19.297 67.2244 19.2434 67.1172 19.1362C67.01 19.029 66.9564 18.9039 66.9564 18.761V11.3638C66.9564 10.3632 66.6705 9.58596 66.0988 9.03207C65.5449 8.47817 64.8034 8.20122 63.8743 8.20122C62.9452 8.20122 62.1947 8.47817 61.623 9.03207C61.0512 9.58596 60.7653 10.3632 60.7653 11.3638V18.761C60.7653 18.9039 60.7117 19.029 60.6045 19.1362C60.4973 19.2434 60.3722 19.297 60.2293 19.297H58.246Z"
+          fill="currentColor"/>
+    <path d="M53.1744 19.297C52.8528 19.297 52.5669 19.1541 52.3168 18.8682L48.0822 13.8295C48.0107 13.7581 47.9303 13.7223 47.8409 13.7223C47.7695 13.7223 47.7069 13.7491 47.6533 13.8027C47.5997 13.8563 47.5729 13.9189 47.5729 13.9903V18.761C47.5729 18.9039 47.5193 19.029 47.4121 19.1362C47.3049 19.2434 47.1798 19.297 47.0369 19.297H45.0536C44.9107 19.297 44.7856 19.2434 44.6784 19.1362C44.5712 19.029 44.5176 18.9039 44.5176 18.761V0.536027C44.5176 0.393087 44.5712 0.268014 44.6784 0.160808C44.7856 0.0536026 44.9107 0 45.0536 0H47.0369C47.1798 0 47.3049 0.0536026 47.4121 0.160808C47.5193 0.268014 47.5729 0.393087 47.5729 0.536027V10.5061C47.5729 10.5955 47.5997 10.667 47.6533 10.7206C47.7069 10.7742 47.7695 10.801 47.8409 10.801C47.9124 10.801 47.9839 10.7652 48.0554 10.6938L52.424 6.00351C52.6741 5.75337 52.9421 5.62829 53.228 5.62829H55.3989C55.5597 5.62829 55.6848 5.6819 55.7741 5.7891C55.8813 5.89631 55.9349 6.02138 55.9349 6.16432C55.9349 6.32513 55.8813 6.45914 55.7741 6.56634L50.8695 11.8462C50.7623 11.9534 50.7087 12.0606 50.7087 12.1678C50.7087 12.275 50.7623 12.3822 50.8695 12.4895L55.8813 18.359C55.9885 18.484 56.0421 18.618 56.0421 18.761C56.0421 18.9218 55.9885 19.0558 55.8813 19.163C55.792 19.2523 55.6669 19.297 55.5061 19.297H53.1744Z"
+          fill="currentColor"/>
+    <path d="M34.9505 19.297C34.8076 19.297 34.6736 19.2434 34.5485 19.1362C34.4413 19.029 34.3877 18.9039 34.3877 18.761V6.16432C34.3877 6.02138 34.4413 5.8963 34.5485 5.7891C34.6736 5.68189 34.8076 5.62829 34.9505 5.62829H36.3174C36.639 5.62829 36.8356 5.80697 36.907 6.16432C36.9785 6.48594 37.05 6.72715 37.1214 6.88796C37.2108 7.0309 37.3448 7.10237 37.5235 7.10237C37.6307 7.10237 37.7468 7.06663 37.8719 6.99516C37.9969 6.90582 38.122 6.80755 38.2471 6.70035C38.6402 6.36086 39.0422 6.10178 39.4531 5.92311C39.8641 5.72656 40.4359 5.62829 41.1684 5.62829H42.5353C42.6782 5.62829 42.8033 5.68189 42.9105 5.7891C43.0177 5.8963 43.0713 6.02138 43.0713 6.16432V8.28163C43.0713 8.42457 43.0177 8.54964 42.9105 8.65685C42.8033 8.76405 42.6782 8.81766 42.5353 8.81766H41.0076C39.9713 8.81766 39.1137 9.12141 38.4347 9.7289C37.7736 10.3364 37.443 11.2745 37.443 12.543V18.761C37.443 18.9039 37.3894 19.029 37.2822 19.1362C37.175 19.2434 37.05 19.297 36.907 19.297H34.9505Z"
+          fill="currentColor"/>
+    <path d="M23.8885 19.7526C22.9594 19.7526 22.1107 19.6007 21.3424 19.297C20.5741 18.9754 19.9219 18.5108 19.3859 17.9033C18.7784 17.2601 18.3138 16.4739 17.9922 15.5448C17.6706 14.6157 17.5098 13.5883 17.5098 12.4626C17.5098 11.337 17.6706 10.3096 17.9922 9.38048C18.3138 8.45137 18.7784 7.6652 19.3859 7.02196C19.9219 6.43233 20.5741 5.97671 21.3424 5.65509C22.1107 5.33348 22.9594 5.17267 23.8885 5.17267C24.6389 5.17267 25.2375 5.262 25.6842 5.44068C26.1309 5.60149 26.5775 5.82483 27.0242 6.11072C27.3995 6.36086 27.6943 6.48594 27.9087 6.48594C28.0695 6.48594 28.1946 6.4502 28.2839 6.37873C28.3911 6.30726 28.4983 6.20005 28.6055 6.05711C28.7842 5.77123 28.9986 5.62829 29.2487 5.62829H30.6424C30.7854 5.62829 30.9104 5.68189 31.0176 5.7891C31.1248 5.8963 31.1784 6.02138 31.1784 6.16432V18.761C31.1784 18.9039 31.1248 19.029 31.0176 19.1362C30.9104 19.2434 30.7854 19.297 30.6424 19.297H29.2487C28.9986 19.297 28.7842 19.1541 28.6055 18.8682C28.4983 18.7252 28.3911 18.618 28.2839 18.5466C28.1946 18.4751 28.0695 18.4394 27.9087 18.4394C27.6943 18.4394 27.3995 18.5644 27.0242 18.8146C26.5775 19.1005 26.1309 19.3238 25.6842 19.4846C25.2375 19.6633 24.6389 19.7526 23.8885 19.7526ZM20.6455 12.4626C20.6455 13.6955 20.9582 14.6961 21.5836 15.4644C21.9052 15.8575 22.3072 16.1702 22.7896 16.4024C23.2721 16.6169 23.8259 16.7241 24.4513 16.7241C25.0767 16.7241 25.6306 16.6169 26.113 16.4024C26.5954 16.1702 26.9974 15.8575 27.3191 15.4644C27.9265 14.6961 28.2303 13.6955 28.2303 12.4626C28.2303 11.2298 27.9265 10.2381 27.3191 9.48769C26.9974 9.07674 26.5954 8.76405 26.113 8.54964C25.6306 8.31736 25.0767 8.20122 24.4513 8.20122C23.8259 8.20122 23.2721 8.31736 22.7896 8.54964C22.3072 8.76405 21.9052 9.07674 21.5836 9.48769C20.9582 10.2203 20.6455 11.2119 20.6455 12.4626Z"
+          fill="currentColor"/>
+    <path d="M0.536027 19.297C0.393086 19.297 0.268013 19.2434 0.160808 19.1362C0.0536025 19.029 0 18.9039 0 18.761V1.07206C0 0.929116 0.0536025 0.804043 0.160808 0.696837C0.268013 0.589631 0.393086 0.536028 0.536027 0.536028H6.83434C9.47874 0.536028 11.6407 1.349 13.3203 2.97495C14.16 3.79686 14.8033 4.80638 15.25 6.00351C15.6966 7.18277 15.92 8.48711 15.92 9.91652C15.92 11.3459 15.6966 12.6592 15.25 13.8563C14.8033 15.0356 14.16 16.0362 13.3203 16.8581C11.6407 18.484 9.47874 19.297 6.83434 19.297H0.536027ZM3.24296 15.786C3.24296 15.9647 3.3323 16.054 3.51098 16.054H6.83434C8.53176 16.054 9.88076 15.5537 10.8813 14.5532C11.4352 14.0171 11.8551 13.356 12.141 12.5699C12.4269 11.7837 12.5698 10.8992 12.5698 9.91652C12.5698 8.9338 12.4269 8.04935 12.141 7.26318C11.8551 6.477 11.4352 5.8159 10.8813 5.27988C9.84502 4.27929 8.49602 3.779 6.83434 3.779H3.51098C3.3323 3.779 3.24296 3.86833 3.24296 4.04701V15.786Z"
+          fill="currentColor"/>
+    <g clip-path="url(#clip0_4498_21233)">
+        <path d="M140.006 0.211082H142.457C143.062 0.211082 143.553 0.705733 143.553 1.31591V4.01815C143.553 4.62833 143.062 5.12298 142.457 5.12298H140.006C139.401 5.12298 138.911 4.62833 138.911 4.01815V1.31591C138.911 0.705733 139.401 0.211082 140.006 0.211082Z"
+              fill="currentColor"/>
+        <path d="M116.73 0.211082H119.181C119.786 0.211082 120.277 0.705733 120.277 1.31591V4.01815C120.277 4.62833 119.786 5.12298 119.181 5.12298H116.73C116.125 5.12298 115.635 4.62833 115.635 4.01815V1.31591C115.635 0.705733 116.125 0.211082 116.73 0.211082Z"
+              fill="currentColor"/>
+        <path d="M116.673 11.4481H119.184C119.499 11.4481 119.702 11.6806 119.754 12.0236L119.983 13.6601C120.017 13.8373 120.106 13.9363 120.256 13.9363H121.576C121.89 13.9363 122.089 14.1527 122.146 14.5118L122.374 15.8974C122.411 16.192 122.612 16.3716 122.922 16.4498C122.922 16.4498 124.223 16.8572 129.643 16.8572V20.3121C124.225 20.3121 121.119 19.9024 121.119 19.9024C120.861 19.8633 120.549 19.6446 120.549 19.327L120.32 18.1071C120.32 17.9551 120.197 17.8309 120.046 17.8309H118.49C118.175 17.8309 118.002 17.5754 117.919 17.2554L117.691 16.3278C117.657 16.1345 117.568 16.0516 117.417 16.0516H116.902C116.587 16.0516 116.331 15.7938 116.331 15.4762L116.103 12.0236C116.103 11.7059 116.358 11.4481 116.673 11.4481Z"
+              fill="currentColor"/>
+        <path d="M136.912 15.8974L137.14 14.5118C137.197 14.1527 137.395 13.9363 137.71 13.9363H139.03C139.18 13.9363 139.269 13.8373 139.303 13.6601L139.532 12.0236C139.584 11.6806 139.787 11.4481 140.102 11.4481H142.613C142.927 11.4481 143.183 11.7059 143.183 12.0236L142.955 15.4762C142.955 15.7938 142.699 16.0516 142.384 16.0516H141.869C141.718 16.0516 141.629 16.1345 141.595 16.3278L141.366 17.2554C141.284 17.5754 141.111 17.8309 140.796 17.8309H139.239C139.089 17.8309 138.966 17.9551 138.966 18.1071L138.737 19.327C138.737 19.6446 138.425 19.8633 138.167 19.9024C138.167 19.9024 135.061 20.3121 129.643 20.3121V16.8572C135.063 16.8572 136.364 16.4498 136.364 16.4498C136.674 16.3716 136.875 16.192 136.912 15.8974Z"
+              fill="currentColor"/>
+    </g>
+    <defs>
+        <clipPath id="clip0_4498_21233">
+            <rect width="27.9181" height="20.101" fill="currentColor" transform="matrix(-1 0 0 1 143.553 0.211082)"/>
+        </clipPath>
+    </defs>
+</svg>

pkgs/clan-app/ui/package.json

@@ -52,7 +52,6 @@
     "postcss": "^8.4.38",
     "postcss-url": "^10.1.3",
     "prettier": "^3.2.5",
-    "solid-devtools": "^0.34.0",
     "storybook": "^9.0.8",
     "swagger-ui-dist": "^5.26.2",
     "tailwindcss": "^3.4.3",
@@ -73,9 +72,11 @@
     "@solidjs/router": "^0.15.3",
     "@tanstack/eslint-plugin-query": "^5.51.12",
     "@tanstack/solid-query": "^5.76.0",
+    "@tanstack/solid-query-devtools": "^5.83.0",
     "solid-js": "^1.9.7",
     "solid-toast": "^0.5.0",
-    "three": "^0.176.0"
+    "three": "^0.176.0",
+    "valibot": "^1.1.0"
   },
   "optionalDependencies": {
     "@esbuild/darwin-arm64": "^0.25.4",

pkgs/clan-app/ui/src/components/Button/Button.css

@@ -29,7 +29,7 @@
     box-shadow: 0.125rem 0.125rem 0 0 theme(colors.bg.inv.acc.3) inset;
 
     &.ghost {
-      @apply bg-transparent border-none shadow-none;
+      @apply bg-transparent border-transparent shadow-none;
     }
 
     &:hover {
@@ -71,7 +71,7 @@
       0.125rem 0.125rem 0 0 theme(colors.off.white) inset;
 
     &.ghost {
-      @apply bg-transparent border-none shadow-none;
+      @apply bg-transparent border-transparent shadow-none;
     }
 
     &:hover {
@@ -138,6 +138,10 @@
       transition: all 0.5s ease;
     }
   }
+
+  & > span.typography {
+    @apply max-w-full overflow-hidden whitespace-nowrap text-ellipsis;
+  }
 }
 
 /* button group */

pkgs/clan-app/ui/src/components/Divider/Divider.css

@@ -1,5 +1,5 @@
 hr {
-  @apply border-none outline-none bg-inv-2;
+  @apply border-none outline-none bg-inv-2 self-stretch;
 
   &.inverted {
     @apply bg-def-3;

pkgs/clan-app/ui/src/components/Form/Fieldset.stories.tsx

@@ -1,10 +1,15 @@
 import type { Meta, StoryContext, StoryObj } from "@kachurun/storybook-solid";
-import { Fieldset, FieldsetProps } from "@/src/components/Form/Fieldset";
+import {
+  Fieldset,
+  FieldsetFieldProps,
+  FieldsetProps,
+} from "@/src/components/Form/Fieldset";
 import cx from "classnames";
 import { TextInput } from "@/src/components/Form/TextInput";
 import { TextArea } from "@/src/components/Form/TextArea";
 import { Checkbox } from "@/src/components/Form/Checkbox";
 import { FieldProps } from "./Field";
+import { HostFileInput } from "@/src/components/Form/HostFileInput";
 
 const FieldsetExamples = (props: FieldsetProps) => (
   <div class="flex flex-col gap-8">
@@ -22,7 +27,7 @@ const meta = {
         <div
           class={cx({
             "w-[600px]": (context.args.orientation || "vertical") == "vertical",
-            "w-[1024px]": context.args.orientation == "horizontal",
+            "w-[512px]": context.args.orientation == "horizontal",
             "bg-inv-acc-3": context.args.inverted,
           })}
         >
@@ -40,7 +45,7 @@ export type Story = StoryObj<typeof meta>;
 export const Default: Story = {
   args: {
     legend: "Signup",
-    children: (props: FieldProps) => (
+    children: (props: FieldsetFieldProps) => (
       <>
         <TextInput
           {...props}
@@ -59,6 +64,11 @@ export const Default: Story = {
           label="Bio"
           input={{ placeholder: "Tell us a bit about yourself", rows: 8 }}
         />
+        <HostFileInput
+          {...props}
+          label="Profile pic"
+          onSelectFile={async () => "/home/foo/bar/baz/fizz/buzz/bla/bizz"}
+        />
         <Checkbox {...props} label="Accept Terms" required={true} />
       </>
     ),

pkgs/clan-app/ui/src/components/Form/Fieldset.tsx

@@ -12,24 +12,28 @@ export type FieldsetFieldProps = Pick<
   disabled?: boolean;
 };
 
-export interface FieldsetProps
-  extends Pick<FieldProps, "orientation" | "inverted"> {
+export type FieldsetProps = Pick<FieldProps, "orientation" | "inverted"> & {
   legend?: string;
-  disabled?: boolean;
   error?: string;
-  children: (props: FieldsetFieldProps) => JSX.Element;
-}
+  disabled?: boolean;
+  name?: string;
+  children: JSX.Element | ((props: FieldsetFieldProps) => JSX.Element);
+};
 
 export const Fieldset = (props: FieldsetProps) => {
-  const orientation = () => props.orientation || "vertical";
-
   const [fieldProps] = splitProps(props, [
     "orientation",
     "inverted",
     "disabled",
     "error",
+    "children",
   ]);
 
+  const children = () =>
+    typeof props.children === "function"
+      ? props.children(fieldProps)
+      : props.children;
+
   return (
     <fieldset
       role="group"
@@ -51,7 +55,7 @@ export const Fieldset = (props: FieldsetProps) => {
           </Typography>
         </legend>
       )}
-      <div class="fields">{props.children(fieldProps)}</div>
+      <div class="fields">{children()}</div>
       {props.error && (
         <div class="error" role="alert">
           <Typography

pkgs/clan-app/ui/src/components/Form/HostFileInput.css

@@ -0,0 +1,11 @@
+div.form-field.host-file {
+  button {
+    @apply w-fit;
+  }
+
+  &.horizontal {
+    button {
+      @apply grow max-w-[18rem];
+    }
+  }
+}

pkgs/clan-app/ui/src/components/Form/HostFileInput.stories.tsx

@@ -0,0 +1,131 @@
+import type { Meta, StoryContext, StoryObj } from "@kachurun/storybook-solid";
+import cx from "classnames";
+import {
+  HostFileInput,
+  HostFileInputProps,
+} from "@/src/components/Form/HostFileInput";
+
+const Examples = (props: HostFileInputProps) => (
+  <div class="flex flex-col gap-8">
+    <div class="flex flex-col gap-8 p-8">
+      <HostFileInput {...props} />
+      <HostFileInput {...props} size="s" />
+    </div>
+    <div class="flex flex-col gap-8 p-8 bg-inv-acc-3">
+      <HostFileInput {...props} inverted={true} />
+      <HostFileInput {...props} inverted={true} size="s" />
+    </div>
+    <div class="flex flex-col gap-8 p-8">
+      <HostFileInput {...props} orientation="horizontal" />
+      <HostFileInput {...props} orientation="horizontal" size="s" />
+    </div>
+    <div class="flex flex-col gap-8 p-8 bg-inv-acc-3">
+      <HostFileInput {...props} inverted={true} orientation="horizontal" />
+      <HostFileInput
+        {...props}
+        inverted={true}
+        orientation="horizontal"
+        size="s"
+      />
+    </div>
+  </div>
+);
+
+const meta = {
+  title: "Components/Form/HostFileInput",
+  component: Examples,
+  decorators: [
+    (Story: StoryObj, context: StoryContext<HostFileInputProps>) => {
+      return (
+        <div
+          class={cx({
+            "w-[600px]": (context.args.orientation || "vertical") == "vertical",
+            "w-[1024px]": context.args.orientation == "horizontal",
+            "bg-inv-acc-3": context.args.inverted,
+          })}
+        >
+          <Story />
+        </div>
+      );
+    },
+  ],
+} satisfies Meta<HostFileInputProps>;
+
+export default meta;
+
+export type Story = StoryObj<typeof meta>;
+
+export const Bare: Story = {
+  args: {
+    onSelectFile: async () => {
+      return "/home/github/clans/my-clan/foo/bar/baz/fizz/buzz";
+    },
+    input: {
+      placeholder: "e.g. 11/06/89",
+    },
+  },
+};
+
+export const Label: Story = {
+  args: {
+    ...Bare.args,
+    label: "DOB",
+  },
+};
+
+export const Description: Story = {
+  args: {
+    ...Label.args,
+    description: "The date you were born",
+  },
+};
+
+export const Required: Story = {
+  args: {
+    ...Description.args,
+    required: true,
+  },
+};
+
+export const Tooltip: Story = {
+  args: {
+    ...Required.args,
+    tooltip: "The day you came out of your momma",
+  },
+};
+
+export const Icon: Story = {
+  args: {
+    ...Tooltip.args,
+    icon: "Checkmark",
+  },
+};
+
+export const Ghost: Story = {
+  args: {
+    ...Icon.args,
+    ghost: true,
+  },
+};
+
+export const Invalid: Story = {
+  args: {
+    ...Tooltip.args,
+    validationState: "invalid",
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    ...Icon.args,
+    disabled: true,
+  },
+};
+
+export const ReadOnly: Story = {
+  args: {
+    ...Icon.args,
+    readOnly: true,
+    defaultValue: "14/05/02",
+  },
+};

pkgs/clan-app/ui/src/components/Form/HostFileInput.tsx

@@ -0,0 +1,111 @@
+import {
+  TextField,
+  TextFieldInputProps,
+  TextFieldRootProps,
+} from "@kobalte/core/text-field";
+
+import cx from "classnames";
+import { Label } from "./Label";
+import { Button } from "../Button/Button";
+import "./HostFileInput.css";
+import { PolymorphicProps } from "@kobalte/core/polymorphic";
+import { FieldProps } from "./Field";
+import { Orienter } from "./Orienter";
+import { createSignal } from "solid-js";
+import { Tooltip } from "@kobalte/core/tooltip";
+import { Typography } from "@/src/components/Typography/Typography";
+
+export type HostFileInputProps = FieldProps &
+  TextFieldRootProps & {
+    onSelectFile: () => Promise<string>;
+    input?: PolymorphicProps<"input", TextFieldInputProps<"input">>;
+  };
+
+export const HostFileInput = (props: HostFileInputProps) => {
+  const [value, setValue] = createSignal<string>(props.value || "");
+
+  let actualInputElement: HTMLInputElement | undefined;
+
+  const selectFile = async () => {
+    try {
+      console.log("selecting file", props.onSelectFile);
+      setValue(await props.onSelectFile());
+      actualInputElement?.dispatchEvent(
+        new Event("input", { bubbles: true, cancelable: true }),
+      );
+    } catch (error) {
+      console.log("Error selecting file", error);
+      // todo work out how to display the error
+    }
+  };
+
+  return (
+    <TextField
+      class={cx("form-field", "host-file", props.size, props.orientation, {
+        inverted: props.inverted,
+        ghost: props.ghost,
+      })}
+      {...props}
+    >
+      <Orienter
+        orientation={props.orientation}
+        align={props.orientation == "horizontal" ? "center" : "start"}
+      >
+        <Label
+          labelComponent={TextField.Label}
+          descriptionComponent={TextField.Description}
+          {...props}
+        />
+
+        <TextField.Input
+          {...props.input}
+          hidden={true}
+          value={value()}
+          ref={(el: HTMLInputElement) => {
+            actualInputElement = el; // Capture for local use
+          }}
+        />
+
+        {!value() && (
+          <Button
+            hierarchy="secondary"
+            size={props.size}
+            startIcon="Folder"
+            onClick={selectFile}
+            disabled={props.disabled || props.readOnly}
+          >
+            No Selection
+          </Button>
+        )}
+
+        {value() && (
+          <Tooltip placement="top">
+            <Tooltip.Portal>
+              <Tooltip.Content class="tooltip-content">
+                <Typography
+                  hierarchy="body"
+                  size="xs"
+                  weight="medium"
+                  inverted={!props.inverted}
+                >
+                  {value()}
+                </Typography>
+                <Tooltip.Arrow />
+              </Tooltip.Content>
+            </Tooltip.Portal>
+            <Tooltip.Trigger
+              as={Button}
+              hierarchy="secondary"
+              size={props.size}
+              startIcon="Folder"
+              onClick={selectFile}
+              disabled={props.disabled || props.readOnly}
+            >
+              {value()}
+            </Tooltip.Trigger>
+          </Tooltip>
+        )}
+      </Orienter>
+    </TextField>
+  );
+};

pkgs/clan-app/ui/src/components/Form/Label.css

@@ -22,40 +22,3 @@ div.form-label {
     }
   }
 }
-
-div.tooltip-content {
-  @apply z-50 px-2 py-0.5 bg-inv-4 rounded-[0.125rem] leading-none;
-
-  max-width: min(calc(100vw - 16px), 380px);
-  transform-origin: var(--kb-tooltip-content-transform-origin);
-  animation: tooltipHide 250ms ease-in forwards;
-
-  &[data-expanded] {
-    animation: tooltipShow 250ms ease-out;
-  }
-
-  &.inverted {
-    @apply bg-def-2;
-  }
-}
-
-@keyframes tooltipShow {
-  from {
-    opacity: 0;
-    transform: scale(0.96);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-@keyframes tooltipHide {
-  from {
-    opacity: 1;
-    transform: scale(1);
-  }
-  to {
-    opacity: 0;
-    transform: scale(0.96);
-  }
-}

pkgs/clan-app/ui/src/components/Form/Label.tsx

@@ -1,12 +1,11 @@
 import { Show } from "solid-js";
 import { Typography } from "@/src/components/Typography/Typography";
-import { Tooltip as KTooltip } from "@kobalte/core/tooltip";
+import { Tooltip } from "@/src/components/Tooltip/Tooltip";
 import Icon from "@/src/components/Icon/Icon";
 import { TextField } from "@kobalte/core/text-field";
 import { Checkbox } from "@kobalte/core/checkbox";
 import { Combobox } from "@kobalte/core/combobox";
 import "./Label.css";
-import cx from "classnames";
 
 export type Size = "default" | "s";
 
@@ -49,31 +48,27 @@ export const Label = (props: LabelProps) => {
             {props.label}
           </Typography>
           {props.tooltip && (
-            <KTooltip placement="top">
-              <KTooltip.Trigger>
+            <Tooltip
+              placement="top"
+              inverted={props.inverted}
+              trigger={
                 <Icon
                   icon="Info"
                   color="tertiary"
                   inverted={props.inverted}
                   size={props.size == "default" ? "0.85em" : "0.75rem"}
                 />
-                <KTooltip.Portal>
-                  <KTooltip.Content
-                    class={cx("tooltip-content", { inverted: props.inverted })}
-                  >
-                    <Typography
-                      hierarchy="body"
-                      size="xs"
-                      weight="medium"
-                      inverted={!props.inverted}
-                    >
-                      {props.tooltip}
-                    </Typography>
-                    <KTooltip.Arrow />
-                  </KTooltip.Content>
-                </KTooltip.Portal>
-              </KTooltip.Trigger>
-            </KTooltip>
+              }
+            >
+              <Typography
+                hierarchy="body"
+                size="xs"
+                weight="medium"
+                inverted={!props.inverted}
+              >
+                {props.tooltip}
+              </Typography>
+            </Tooltip>
           )}
         </props.labelComponent>
         {props.description && (

pkgs/clan-app/ui/src/components/Form/Orienter.css

@@ -5,7 +5,7 @@ div.orienter {
   }
 
   &.horizontal {
-    @apply flex-row justify-start;
+    @apply flex-row justify-between gap-0;
 
     & > div.form-label {
       @apply w-1/2 shrink;

pkgs/clan-app/ui/src/components/Icon/Icon.tsx

@@ -102,6 +102,7 @@ export type IconVariant = keyof typeof icons;
 const viewBoxes: Partial<Record<IconVariant, string>> = {
   ClanIcon: "0 0 72 89",
   Offline: "0 0 38 27",
+  Cursor: "0 0 35 42",
 };
 
 export interface IconProps extends JSX.SvgSVGAttributes<SVGElement> {

pkgs/clan-app/ui/src/components/Logo/Logo.stories.tsx

@@ -0,0 +1,88 @@
+import type { Meta, StoryContext, StoryObj } from "@kachurun/storybook-solid";
+import { Component, For } from "solid-js";
+import { Logo, LogoProps, LogoVariant } from "./Logo";
+import cx from "classnames";
+
+const variants: LogoVariant[] = ["Clan", "Darknet"];
+
+const LogoExamples: Component<LogoProps> = (props) => (
+  <div class="grid grid-cols-6 items-center gap-4">
+    <For each={variants}>{(item) => <Logo {...props} variant={item} />}</For>
+  </div>
+);
+
+const meta: Meta<LogoProps> = {
+  title: "Components/Logo",
+  component: LogoExamples,
+  decorators: [
+    (Story: StoryObj, context: StoryContext<LogoProps>) => (
+      <div class={cx(context.args.inverted || false ? "bg-inv-acc-3" : "")}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+
+type Story = StoryObj<LogoProps>;
+
+export const Default: Story = {};
+
+export const Primary: Story = {
+  args: {
+    color: "primary",
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    color: "secondary",
+  },
+};
+
+export const Tertiary: Story = {
+  args: {
+    color: "tertiary",
+  },
+};
+
+export const Quaternary: Story = {
+  args: {
+    color: "quaternary",
+  },
+};
+
+export const PrimaryInverted: Story = {
+  args: {
+    ...Primary.args,
+    inverted: true,
+  },
+};
+
+export const SecondaryInverted: Story = {
+  args: {
+    ...Secondary.args,
+    inverted: true,
+  },
+};
+
+export const TertiaryInverted: Story = {
+  args: {
+    ...Tertiary.args,
+    inverted: true,
+  },
+};
+
+export const QuaternaryInverted: Story = {
+  args: {
+    ...Quaternary.args,
+    inverted: true,
+  },
+};
+
+export const Inverted: Story = {
+  args: {
+    inverted: true,
+  },
+};

pkgs/clan-app/ui/src/components/Logo/Logo.tsx

@@ -0,0 +1,40 @@
+import Clan from "@/logos/clan.svg";
+import Darknet from "@/logos/darknet.svg";
+import { Dynamic } from "solid-js/web";
+import { Color, fgClass } from "@/src/components/colors";
+import { JSX, splitProps } from "solid-js";
+import cx from "classnames";
+
+const logos = {
+  Clan,
+  Darknet,
+};
+
+export type LogoVariant = keyof typeof logos;
+
+export interface LogoProps extends JSX.SvgSVGAttributes<SVGElement> {
+  class?: string;
+  variant: LogoVariant;
+  color?: Color;
+  inverted?: boolean;
+}
+
+export const Logo = (props: LogoProps) => {
+  const [local, iconProps] = splitProps(props, [
+    "variant",
+    "color",
+    "class",
+    "inverted",
+  ]);
+
+  const Logo = logos[local.variant];
+  return (
+    <Dynamic
+      component={Logo}
+      class={cx("icon", local.class, fgClass(local.color, local.inverted), {
+        inverted: local.inverted,
+      })}
+      data-logo-name={local.variant}
+    />
+  );
+};

pkgs/clan-app/ui/src/components/Modal/Modal.css

@@ -1,5 +1,5 @@
 div.modal-content {
-  @apply max-w-[512px];
+  @apply min-w-[320px] max-w-[512px];
   @apply rounded-md;
 
   /* todo replace with a theme() color */
@@ -12,7 +12,7 @@ div.modal-content {
     @apply border border-def-2 rounded-tl-md rounded-tr-md;
     @apply border-b-def-3;
 
-    & > .title {
+    & > .modal-title {
       @apply mx-auto;
     }
   }

pkgs/clan-app/ui/src/components/Modal/Modal.stories.tsx

@@ -2,7 +2,7 @@ import { TagProps } from "@/src/components/Tag/Tag";
 import { Meta, StoryObj } from "@kachurun/storybook-solid";
 import { fn } from "storybook/test";
 import { Modal, ModalContext, ModalProps } from "@/src/components/Modal/Modal";
-import { Fieldset } from "@/src/components/Form/Fieldset";
+import { Fieldset, FieldsetFieldProps } from "@/src/components/Form/Fieldset";
 import { TextInput } from "@/src/components/Form/TextInput";
 import { TextArea } from "@/src/components/Form/TextArea";
 import { Checkbox } from "@/src/components/Form/Checkbox";
@@ -24,7 +24,7 @@ export const Default: Story = {
     children: ({ close }: ModalContext) => (
       <form class="flex flex-col gap-5">
         <Fieldset legend="General">
-          {(props) => (
+          {(props: FieldsetFieldProps) => (
             <>
               <TextInput
                 {...props}

pkgs/clan-app/ui/src/components/Modal/Modal.tsx

@@ -3,6 +3,7 @@ import { Dialog as KDialog } from "@kobalte/core/dialog";
 import "./Modal.css";
 import { Typography } from "../Typography/Typography";
 import Icon from "../Icon/Icon";
+import cx from "classnames";
 
 export interface ModalContext {
   close(): void;
@@ -13,6 +14,8 @@ export interface ModalProps {
   title: string;
   onClose: () => void;
   children: (ctx: ModalContext) => JSX.Element;
+  mount?: Node;
+  class?: string;
 }
 
 export const Modal = (props: ModalProps) => {
@@ -20,18 +23,33 @@ export const Modal = (props: ModalProps) => {
 
   return (
     <KDialog id={props.id} open={open()} modal={true}>
-      <KDialog.Portal>
-        <KDialog.Content class="modal-content">
+      <KDialog.Portal mount={props.mount}>
+        <KDialog.Content class={cx("modal-content", props.class)}>
           <div class="header">
-            <Typography class="title" hierarchy="label" family="mono" size="xs">
+            <Typography
+              class="modal-title"
+              hierarchy="label"
+              family="mono"
+              size="xs"
+            >
               {props.title}
             </Typography>
-            <KDialog.CloseButton onClick={() => setOpen(false)}>
+            <KDialog.CloseButton
+              onClick={() => {
+                setOpen(false);
+                props.onClose();
+              }}
+            >
               <Icon icon="Close" size="0.75rem" />
             </KDialog.CloseButton>
           </div>
           <div class="body">
-            {props.children({ close: () => setOpen(false) })}
+            {props.children({
+              close: () => {
+                setOpen(false);
+                props.onClose();
+              },
+            })}
           </div>
         </KDialog.Content>
       </KDialog.Portal>

pkgs/clan-app/ui/src/components/Sidebar/Sidebar.css

@@ -1,5 +1,5 @@
 div.sidebar {
-  @apply h-full w-auto max-w-60 border-none;
+  @apply w-60 border-none;
 
   & > div.header {
   }

pkgs/clan-app/ui/src/components/Sidebar/Sidebar.stories.tsx

@@ -0,0 +1,157 @@
+import type { Meta, StoryObj } from "@kachurun/storybook-solid";
+import {
+  createMemoryHistory,
+  MemoryRouter,
+  Route,
+  RouteSectionProps,
+} from "@solidjs/router";
+import { Sidebar } from "@/src/components/Sidebar/Sidebar";
+import { Suspense } from "solid-js";
+import { QueryClient, QueryClientProvider } from "@tanstack/solid-query";
+import { addClanURI, resetStore } from "@/src/stores/clan";
+import { SolidQueryDevtools } from "@tanstack/solid-query-devtools";
+import { encodeBase64 } from "@/src/hooks/clan";
+
+const defaultClanURI = "/home/brian/clans/my-clan";
+
+const queryData = {
+  "/home/brian/clans/my-clan": {
+    details: {
+      name: "Brian's Clan",
+      uri: "/home/brian/clans/my-clan",
+    },
+    machines: {
+      europa: {
+        name: "Europa",
+        machineClass: "nixos",
+      },
+      ganymede: {
+        name: "Ganymede",
+        machineClass: "nixos",
+      },
+    },
+  },
+  "/home/brian/clans/davhau": {
+    details: {
+      name: "Dave's Clan",
+      uri: "/home/brian/clans/davhau",
+    },
+    machines: {
+      callisto: {
+        name: "Callisto",
+        machineClass: "nixos",
+      },
+      amalthea: {
+        name: "Amalthea",
+        machineClass: "nixos",
+      },
+    },
+  },
+  "/home/brian/clans/mic92": {
+    details: {
+      name: "Mic92's Clan",
+      uri: "/home/brian/clans/mic92",
+    },
+    machines: {
+      thebe: {
+        name: "Thebe",
+        machineClass: "nixos",
+      },
+      sponde: {
+        name: "Sponde",
+        machineClass: "nixos",
+      },
+    },
+  },
+};
+
+const staticSections = [
+  {
+    title: "Links",
+    links: [
+      { label: "GitHub", path: "https://github.com/brian-the-dev" },
+      { label: "Twitter", path: "https://twitter.com/brian_the_dev" },
+      {
+        label: "LinkedIn",
+        path: "https://www.linkedin.com/in/brian-the-dev/",
+      },
+      {
+        label: "Instagram",
+        path: "https://www.instagram.com/brian_the_dev/",
+      },
+    ],
+  },
+];
+
+const meta: Meta<RouteSectionProps> = {
+  title: "Components/Sidebar",
+  component: Sidebar,
+  render: () => {
+    // set history to point to our test clan
+    const history = createMemoryHistory();
+    history.set({ value: `/clans/${encodeBase64(defaultClanURI)}` });
+
+    // reset local storage and then add each clan
+    resetStore();
+
+    Object.keys(queryData).forEach((uri) => addClanURI(uri));
+
+    return (
+      <div style="height: 670px;">
+        <MemoryRouter
+          history={history}
+          root={(props) => <Suspense>{props.children}</Suspense>}
+        >
+          <Route
+            path="/clans/:clanURI"
+            component={() => <Sidebar staticSections={staticSections} />}
+          >
+            <Route path="/" />
+            <Route
+              path="/machines/:machineID"
+              component={() => <h1>Machine</h1>}
+            />
+          </Route>
+        </MemoryRouter>
+        <SolidQueryDevtools initialIsOpen={true} />
+      </div>
+    );
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<RouteSectionProps>;
+
+export const Default: Story = {
+  args: {},
+  decorators: [
+    (Story: StoryObj) => {
+      const queryClient = new QueryClient({
+        defaultOptions: {
+          queries: {
+            retry: false,
+            staleTime: Infinity,
+          },
+        },
+      });
+
+      Object.entries(queryData).forEach(([clanURI, clan]) => {
+        queryClient.setQueryData(
+          ["clans", encodeBase64(clanURI), "details"],
+          clan.details,
+        );
+        queryClient.setQueryData(
+          ["clans", encodeBase64(clanURI), "machines"],
+          clan.machines || {},
+        );
+      });
+
+      return (
+        <QueryClientProvider client={queryClient}>
+          <Story />
+        </QueryClientProvider>
+      );
+    },
+  ],
+};

pkgs/clan-app/ui/src/components/Sidebar/Sidebar.tsx

@@ -0,0 +1,28 @@
+import "./Sidebar.css";
+import { SidebarHeader } from "@/src/components/Sidebar/SidebarHeader";
+import { SidebarBody } from "@/src/components/Sidebar/SidebarBody";
+
+export interface LinkProps {
+  path: string;
+  label?: string;
+}
+
+export interface SectionProps {
+  title: string;
+  links: LinkProps[];
+}
+
+export interface SidebarProps {
+  staticSections?: SectionProps[];
+}
+
+export const Sidebar = (props: SidebarProps) => {
+  return (
+    <>
+      <div class="sidebar">
+        <SidebarHeader />
+        <SidebarBody {...props} />
+      </div>
+    </>
+  );
+};

pkgs/clan-app/ui/src/components/Sidebar/SidebarBody.tsx

@@ -1,46 +1,60 @@
-import "./SidebarNavBody.css";
+import "./SidebarBody.css";
 import { A } from "@solidjs/router";
 import { Accordion } from "@kobalte/core/accordion";
 import Icon from "../Icon/Icon";
 import { Typography } from "@/src/components/Typography/Typography";
-import {
-  MachineProps,
-  SidebarNavProps,
-} from "@/src/components/Sidebar/SidebarNav";
 import { For } from "solid-js";
 import { MachineStatus } from "@/src/components/MachineStatus/MachineStatus";
+import { buildMachinePath, useClanURI } from "@/src/hooks/clan";
+import { useMachinesQuery } from "@/src/queries/queries";
+import { SidebarProps } from "./Sidebar";
+
+interface MachineProps {
+  clanURI: string;
+  machineID: string;
+  name: string;
+  status: MachineStatus;
+  serviceCount: number;
+}
 
 const MachineRoute = (props: MachineProps) => (
-  <div class="flex w-full flex-col gap-2">
-    <div class="flex flex-row items-center justify-between">
-      <Typography
-        hierarchy="label"
-        size="xs"
-        weight="bold"
-        color="primary"
-        inverted={true}
-      >
-        {props.label}
-      </Typography>
-      <MachineStatus status={props.status} />
+  <A href={buildMachinePath(props.clanURI, props.machineID)}>
+    <div class="flex w-full flex-col gap-2">
+      <div class="flex flex-row items-center justify-between">
+        <Typography
+          hierarchy="label"
+          size="xs"
+          weight="bold"
+          color="primary"
+          inverted={true}
+        >
+          {props.name}
+        </Typography>
+        <MachineStatus status={props.status} />
+      </div>
+      <div class="flex w-full flex-row items-center gap-1">
+        <Icon icon="Flash" size="0.75rem" inverted={true} color="tertiary" />
+        <Typography
+          hierarchy="label"
+          family="mono"
+          size="s"
+          inverted={true}
+          color="primary"
+        >
+          {props.serviceCount}
+        </Typography>
+      </div>
     </div>
-    <div class="flex w-full flex-row items-center gap-1">
-      <Icon icon="Flash" size="0.75rem" inverted={true} color="tertiary" />
-      <Typography
-        hierarchy="label"
-        family="mono"
-        size="s"
-        inverted={true}
-        color="primary"
-      >
-        {props.serviceCount}
-      </Typography>
-    </div>
-  </div>
+  </A>
 );
 
-export const SidebarNavBody = (props: SidebarNavProps) => {
-  const sectionLabels = props.extraSections.map((section) => section.label);
+export const SidebarBody = (props: SidebarProps) => {
+  const clanURI = useClanURI();
+  const machineList = useMachinesQuery(clanURI);
+
+  const sectionLabels = (props.staticSections || []).map(
+    (section) => section.title,
+  );
 
   // controls which sections are open by default
   // we want them all to be open by default
@@ -76,20 +90,24 @@ export const SidebarNavBody = (props: SidebarNavProps) => {
           </Accordion.Header>
           <Accordion.Content class="content">
             <nav>
-              <For each={props.clanDetail.machines}>
-                {(machine) => (
-                  <A href={machine.path}>
-                    <MachineRoute {...machine} />
-                  </A>
+              <For each={Object.entries(machineList.data || {})}>
+                {([id, machine]) => (
+                  <MachineRoute
+                    clanURI={clanURI}
+                    machineID={id}
+                    name={machine.name || id}
+                    status="Not Installed"
+                    serviceCount={0}
+                  />
                 )}
               </For>
             </nav>
           </Accordion.Content>
         </Accordion.Item>
 
-        <For each={props.extraSections}>
+        <For each={props.staticSections}>
           {(section) => (
-            <Accordion.Item class="item" value={section.label}>
+            <Accordion.Item class="item" value={section.title}>
               <Accordion.Header class="header">
                 <Accordion.Trigger class="trigger">
                   <Typography
@@ -100,7 +118,7 @@ export const SidebarNavBody = (props: SidebarNavProps) => {
                     inverted={true}
                     color="tertiary"
                   >
-                    {section.label}
+                    {section.title}
                   </Typography>
                   <Icon
                     icon="CaretDown"

pkgs/clan-app/ui/src/components/Sidebar/SidebarHeader.css

@@ -15,10 +15,11 @@ div.sidebar-header {
 
     transition: all 250ms ease-in-out;
 
-    div.title {
+    div.clan-label {
       @apply flex items-center gap-2 justify-start;
 
       & > .clan-icon {
+        @apply flex justify-center items-center;
         @apply rounded-full bg-inv-4 w-7 h-7;
       }
     }

pkgs/clan-app/ui/src/components/Sidebar/SidebarHeader.tsx

@@ -0,0 +1,107 @@
+import "./SidebarHeader.css";
+import Icon from "@/src/components/Icon/Icon";
+import { DropdownMenu } from "@kobalte/core/dropdown-menu";
+import { useNavigate } from "@solidjs/router";
+import { Typography } from "../Typography/Typography";
+import { createSignal, For, Suspense } from "solid-js";
+import { useClanListQuery } from "@/src/queries/queries";
+import { navigateToClan, useClanURI } from "@/src/hooks/clan";
+import { clanURIs } from "@/src/stores/clan";
+
+export const SidebarHeader = () => {
+  const navigate = useNavigate();
+
+  const [open, setOpen] = createSignal(false);
+
+  // get information about the current active clan
+  const clanURI = useClanURI();
+  const allClans = useClanListQuery(clanURIs());
+
+  const activeClan = () => allClans.find(({ data }) => data?.uri === clanURI);
+
+  return (
+    <div class="sidebar-header">
+      <Suspense fallback={"Loading..."}>
+        <DropdownMenu open={open()} onOpenChange={setOpen} sameWidth={true}>
+          <DropdownMenu.Trigger class="dropdown-trigger">
+            <div class="clan-label">
+              <div class="clan-icon">
+                <Typography
+                  hierarchy="label"
+                  size="s"
+                  weight="bold"
+                  inverted={true}
+                >
+                  {activeClan()?.data?.name.charAt(0).toUpperCase()}
+                </Typography>
+              </div>
+              <Typography
+                hierarchy="label"
+                size="s"
+                weight="bold"
+                inverted={!open()}
+              >
+                {activeClan()?.data?.name}
+              </Typography>
+            </div>
+            <DropdownMenu.Icon>
+              <Icon icon={"CaretDown"} inverted={!open()} size="0.75rem" />
+            </DropdownMenu.Icon>
+          </DropdownMenu.Trigger>
+          <DropdownMenu.Portal>
+            <DropdownMenu.Content class="sidebar-dropdown-content">
+              <DropdownMenu.Item
+                class="dropdown-item"
+                onSelect={() => navigateToClan(navigate, clanURI)}
+              >
+                <Icon
+                  icon="Settings"
+                  size="0.75rem"
+                  inverted={true}
+                  color="tertiary"
+                />
+                <Typography hierarchy="label" size="xs" weight="medium">
+                  Settings
+                </Typography>
+              </DropdownMenu.Item>
+              <DropdownMenu.Group class="dropdown-group">
+                <DropdownMenu.GroupLabel class="dropdown-group-label">
+                  <Typography
+                    hierarchy="label"
+                    family="mono"
+                    size="xs"
+                    color="tertiary"
+                  >
+                    YOUR CLANS
+                  </Typography>
+                </DropdownMenu.GroupLabel>
+                <div class="dropdown-group-items">
+                  <For each={allClans}>
+                    {(clan) => (
+                      <Suspense fallback={"Loading..."}>
+                        <DropdownMenu.Item
+                          class="dropdown-item"
+                          onSelect={() =>
+                            navigateToClan(navigate, clan.data!.uri)
+                          }
+                        >
+                          <Typography
+                            hierarchy="label"
+                            size="xs"
+                            weight="medium"
+                          >
+                            {clan.data?.name}
+                          </Typography>
+                        </DropdownMenu.Item>
+                      </Suspense>
+                    )}
+                  </For>
+                </div>
+              </DropdownMenu.Group>
+            </DropdownMenu.Content>
+          </DropdownMenu.Portal>
+        </DropdownMenu>
+      </Suspense>
+    </div>
+  );
+};

pkgs/clan-app/ui/src/components/Sidebar/SidebarNav.stories.tsx

@@ -1,109 +0,0 @@
-import type { Meta, StoryObj } from "@kachurun/storybook-solid";
-import {
-  createMemoryHistory,
-  MemoryRouter,
-  Route,
-  RouteSectionProps,
-} from "@solidjs/router";
-import {
-  SidebarNav,
-  SidebarNavProps,
-} from "@/src/components/Sidebar/SidebarNav";
-import { Suspense } from "solid-js";
-import { StoryContext } from "@kachurun/storybook-solid-vite";
-
-const sidebarNavProps: SidebarNavProps = {
-  clanLinks: [
-    { label: "Brian's Clan", path: "/clan/1" },
-    { label: "Dave's Clan", path: "/clan/2" },
-    { label: "Mic92's Clan", path: "/clan/3" },
-  ],
-  clanDetail: {
-    label: "Brian's Clan",
-    settingsPath: "/clan/1/settings",
-    machines: [
-      {
-        label: "Backup & Home",
-        path: "/clan/1/machine/backup",
-        serviceCount: 3,
-        status: "Online",
-      },
-      {
-        label: "Raspberry Pi",
-        path: "/clan/1/machine/pi",
-        serviceCount: 1,
-        status: "Offline",
-      },
-      {
-        label: "Mom's Laptop",
-        path: "/clan/1/machine/moms-laptop",
-        serviceCount: 2,
-        status: "Installed",
-      },
-      {
-        label: "Dad's Laptop",
-        path: "/clan/1/machine/dads-laptop",
-        serviceCount: 4,
-        status: "Not Installed",
-      },
-    ],
-  },
-  extraSections: [
-    {
-      label: "Tools",
-      links: [
-        { label: "Borgbackup", path: "/clan/1/service/borgbackup" },
-        { label: "Syncthing", path: "/clan/1/service/syncthing" },
-        { label: "Mumble", path: "/clan/1/service/mumble" },
-        { label: "Minecraft", path: "/clan/1/service/minecraft" },
-      ],
-    },
-    {
-      label: "Links",
-      links: [
-        { label: "GitHub", path: "https://github.com/brian-the-dev" },
-        { label: "Twitter", path: "https://twitter.com/brian_the_dev" },
-        {
-          label: "LinkedIn",
-          path: "https://www.linkedin.com/in/brian-the-dev/",
-        },
-        {
-          label: "Instagram",
-          path: "https://www.instagram.com/brian_the_dev/",
-        },
-      ],
-    },
-  ],
-};
-
-const meta: Meta<RouteSectionProps> = {
-  title: "Components/Sidebar/Nav",
-  component: SidebarNav,
-  render: (_: never, context: StoryContext<SidebarNavProps>) => {
-    const history = createMemoryHistory();
-    history.set({ value: "/clan/1/machine/backup" });
-
-    return (
-      <div style="height: 670px;">
-        <MemoryRouter
-          history={history}
-          root={(props) => (
-            <Suspense>
-              <SidebarNav {...sidebarNavProps} />
-            </Suspense>
-          )}
-        >
-          <Route path="/clan/1/machine/backup" component={(props) => <></>} />
-        </MemoryRouter>
-      </div>
-    );
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<RouteSectionProps>;
-
-export const Default: Story = {
-  args: {},
-};

pkgs/clan-app/ui/src/components/Sidebar/SidebarNav.tsx

@@ -1,47 +0,0 @@
-import "./SidebarNav.css";
-import { SidebarNavHeader } from "@/src/components/Sidebar/SidebarNavHeader";
-import { SidebarNavBody } from "@/src/components/Sidebar/SidebarNavBody";
-import { MachineStatus } from "@/src/components/MachineStatus/MachineStatus";
-
-export interface LinkProps {
-  path: string;
-  label?: string;
-}
-
-export interface SectionProps {
-  label: string;
-  links: LinkProps[];
-}
-
-export interface MachineProps {
-  label: string;
-  path: string;
-  status: MachineStatus;
-  serviceCount: number;
-}
-
-export interface ClanLinkProps {
-  label: string;
-  path: string;
-}
-
-export interface ClanProps {
-  label: string;
-  settingsPath: string;
-  machines: MachineProps[];
-}
-
-export interface SidebarNavProps {
-  clanDetail: ClanProps;
-  clanLinks: ClanLinkProps[];
-  extraSections: SectionProps[];
-}
-
-export const SidebarNav = (props: SidebarNavProps) => {
-  return (
-    <div class="sidebar">
-      <SidebarNavHeader {...props} />
-      <SidebarNavBody {...props} />
-    </div>
-  );
-};

pkgs/clan-app/ui/src/components/Sidebar/SidebarNavHeader.tsx

@@ -1,96 +0,0 @@
-import "./SidebarNavHeader.css";
-import Icon from "@/src/components/Icon/Icon";
-import { DropdownMenu } from "@kobalte/core/dropdown-menu";
-import { useNavigate } from "@solidjs/router";
-import { Typography } from "../Typography/Typography";
-import { createSignal, For } from "solid-js";
-import { ClanLinkProps, ClanProps } from "@/src/components/Sidebar/SidebarNav";
-
-export interface SidebarHeaderProps {
-  clanDetail: ClanProps;
-  clanLinks: ClanLinkProps[];
-}
-
-export const SidebarNavHeader = (props: SidebarHeaderProps) => {
-  const navigate = useNavigate();
-
-  const [open, setOpen] = createSignal(false);
-
-  const firstChar = props.clanDetail.label.charAt(0);
-
-  return (
-    <div class="sidebar-header">
-      <DropdownMenu open={open()} onOpenChange={setOpen} sameWidth={true}>
-        <DropdownMenu.Trigger class="dropdown-trigger">
-          <div class="title">
-            <div class="clan-icon">
-              <Typography
-                hierarchy="label"
-                size="s"
-                weight="bold"
-                inverted={true}
-              >
-                {firstChar.toUpperCase()}
-              </Typography>
-            </div>
-            <Typography
-              hierarchy="label"
-              size="s"
-              weight="bold"
-              inverted={!open()}
-            >
-              {props.clanDetail.label}
-            </Typography>
-          </div>
-          <DropdownMenu.Icon>
-            <Icon icon={"CaretDown"} inverted={!open()} size="0.75rem" />
-          </DropdownMenu.Icon>
-        </DropdownMenu.Trigger>
-        <DropdownMenu.Portal>
-          <DropdownMenu.Content class="sidebar-dropdown-content">
-            <DropdownMenu.Item
-              class="dropdown-item"
-              onSelect={() => navigate(props.clanDetail.settingsPath)}
-            >
-              <Icon
-                icon="Settings"
-                size="0.75rem"
-                inverted={true}
-                color="tertiary"
-              />
-              <Typography hierarchy="label" size="xs" weight="medium">
-                Settings
-              </Typography>
-            </DropdownMenu.Item>
-            <DropdownMenu.Group class="dropdown-group">
-              <DropdownMenu.GroupLabel class="dropdown-group-label">
-                <Typography
-                  hierarchy="label"
-                  family="mono"
-                  size="xs"
-                  color="tertiary"
-                >
-                  YOUR CLANS
-                </Typography>
-              </DropdownMenu.GroupLabel>
-              <div class="dropdown-group-items">
-                <For each={props.clanLinks}>
-                  {(clan) => (
-                    <DropdownMenu.Item
-                      class="dropdown-item"
-                      onSelect={() => navigate(clan.path)}
-                    >
-                      <Typography hierarchy="label" size="xs" weight="medium">
-                        {clan.label}
-                      </Typography>
-                    </DropdownMenu.Item>
-                  )}
-                </For>
-              </div>
-            </DropdownMenu.Group>
-          </DropdownMenu.Content>
-        </DropdownMenu.Portal>
-      </DropdownMenu>
-    </div>
-  );
-};

pkgs/clan-app/ui/src/components/Sidebar/SidebarPane.css

@@ -1,5 +1,5 @@
 div.sidebar-pane {
-  @apply h-full w-auto max-w-60 border-none;
+  @apply w-full max-w-60 border-none;
 
   & > div.header {
     @apply flex items-center justify-between px-3 py-2 rounded-t-[0.5rem];

pkgs/clan-app/ui/src/components/Sidebar/SidebarPane.stories.tsx

@@ -11,7 +11,7 @@ import { Checkbox } from "@/src/components/Form/Checkbox";
 import { Combobox } from "../Form/Combobox";
 
 const meta: Meta<SidebarPaneProps> = {
-  title: "Components/Sidebar/Pane",
+  title: "Components/SidebarPane",
   component: SidebarPane,
 };